Vue路由大致分为6个步骤：
1.引用vue-router
<script src="js/vue-router.js"></script>
2.安装插件
Vue.use(VueRouter);
3.创建一个路由对象
var router = new VueRouter({ //这里面配置路由对象 });
4.配置路由对象
name:路由名称，在 router-link 只需要通过 :to={name:'变量名'} 指定跳转的地址；
path:跳转的路径，对应路径中#/后面的那串字符，如下图所示：
component:指定要更换的组件
routes:[ {name:'***',path:'***',component:***} ]
5.将配置好的路由关联到vue实例中
router:router,
6.指定路由改变局部的位置
具体实例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>router-link</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
<!-- 1.引用vue-router -->
<script src="js/vue-router.js"></script>
<script>
var Login = {
template:`<div>我是登录页面</div>`
}
var Register = {
template:`<div>我是注册页面</div>`
}
// 2.安装插件
Vue.use(VueRouter);
// 3.创建一个路由对象
var router = new VueRouter({
// 4.配置路由对象
routes:[
//对象有了name就等于有了变量名,第6步中router-link 只需要通过 :to={anme:'变量名'} 就可以了
{name:'login',path:'/login',component:Login},
{name:'register',path:'/register',component:Register}
]
});
//6.指定路由改变局部的位置
var App = {
template:`
<div>
<router-link to="/login">登录</router-link>
<router-link :to="{ name:'login' }">登录</router-link>
<router-view></router-view>
</div>
`
}
//5.将配置好的路由关联到vue实例中
var vm = new Vue({
el: '#app',
router:router,
components: {
app:App
},
template:`<app></app>`
});
</script>
</body>
</html>