### 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>