Vue Router 是 Vue.js(opens new window) 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
前端路由和后端路由：
文档地址：
var login={ template:‘<h2>登录</h2>‘ } var register={ template:‘<h2>注册</h2>‘ } var routerObj=new VueRouter({ routes:[ {path:‘/login‘,component:login}, {path:‘/register‘,component:register} ] })
4. router:routerObj将路由规则对象注册到VM实例上，用来监听URL地址的变化，然后展示对应的组件
var vm=new Vue({ el:‘#div1‘, data:{ }, methods:{ }, router:routerObj })
5. 在控制的div中使用
<router-view></router-view>
{path:‘/‘,component:login},
{path:‘/‘,redirect:‘login‘},
//HTML代码
<div id="div1" <router-link to="/account">account</router-link> <router-view></router-view> </div> <template id="tmp1"> <div> <h2>account 组件</h2> <router-link to="/account/login">登录</router-link> <router-link to="/account/register">注册</router-link> <router-view></router-view> </div> </template>
//js代码 var router=new VueRouter({ routes:[ {path:‘/account‘,component:account, children:[ {path:‘login‘,component:login}, {path:‘register‘,component:register} ]} ] })
HTML代码 <router-view></router-view> <router-view name="left"></router-view> <router-view name="main"></router-view> //js代码 var router=new VueRouter({ routes:[ {path:‘/‘,components:{ default:header, left:leftBox, main:mainBox }}, ] })
以上内容为个人学习总结，欢迎批评指正~~~
原文：https://www.cnblogs.com/wenkangIT/p/15167491.html