## 路由 [toc] ### 二.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，设置样式 }) ``` ```