## 路由 [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，設置樣式 }) ``` ```