### vue-router的使用 1. 导入vue.js和vue-router.js ``` <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script> ``` 2. 创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter 在new路由对象的时候，可以为构造函数传递一个配置对象 ``` var routerObj = new VueRouter({ //route //这个配置对象中的route表示【路由匹配规则】的意思 routes:[ //路由匹配规则 //每个路由规则，都是一个对象，这个规则身上，有两个必须的属性： //属性1是path,表示监听哪个路由链接地址 //属性2是component,表示如果路由是前面匹配到的path，则展示component属性对应的那个组件 //注意component的属性值，必须是一个组件的模板对象，不能是组建的引用名称 { path: '/', redirect: '/login'}, //将根路径重定向到/login路径 { path: '/login', component: login }, { path: '/register', component: register } ], linkActiveClass: 'myactive' //可将路由自带的类名改为myactive，设置样式 }) ``` 3. 创建组建的模板对象 ``` var login = { template: '<h3>登录</h3>' } ``` 4. 将路由规则对象注册到vm实例中 ``` var vm = new Vue({ el: '#app', data: {}, methods: {}, //将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件 router: routerObj }) ``` 5. 使用router-view渲染路由对象组件 ``` <div id="app"> <a href="#/login">登录</a> <a href="#/register">注册</a> <router-view></router-view> </div>