如现在有两个页面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>
