vue两个页面跳转
如现在有两个页面Login和Home,路由配置在index.js中:import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'import Login from '@/components/views/login/Login.vue'imp...
如现在有两个页面Login和Home,路由配置在index.js中: import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' import Login from '@/components/views/login/Login.vue' import Home from '@/components/views/home.vue' //懒加载方式,当路由被访问的时候才加载对应组件 // const Login = resolve => require(['@/components/views/login/Login'], resolve) Vue.use(Router) export default new Router({ routes: [ { path: '/', name: '登录', component: Login }, { path: '/Home', name: '首页', component: Home } ] })
现在在Login中点击按钮跳转到Home,在Home中点击按钮也可以返回到Login:
Login页面:
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="go">点我跳转</button>
</div>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: '哈哈'
}
},
methods:{
go(){
this.$router.push('/aaa')
}
}
}
</script>
home页面:
<template>
<div>我是aaa
<button @click="back">点我返回</button>
</div>
</template>
<script>
export default {
name: 'aaa',
/*data () {
return {
msg: '哈哈'
}
},*/
methods:{
back(){
this.$router.push('/')
}
}
}
</script>
更多推荐
所有评论(0)