***** ## 路由基本 在網頁中，經常需要發生頁面更新或者跳轉。這時候我們就可以使用`Vue-Router`來幫我們實現。`Vue-Router`是用來做路由的，也就是定義`url規則`與具體的`View`映射的關系。可以在一個單頁面中實現數據的更新。 ## 安裝： 1. 使用`CDN`： * 加載最新版的：`<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>`。 * 加載指定版本的：`<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>`。 2. 下載到本地：`<script src="../../lib/vue-router.js"></script>`。 3. 使用`npm`安裝：`npm install vue-router`。 ## 基本使用： ~~~ <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <ul class="nav nav-tabs"> <li role="presentation" class="active"><router-link to="/find">發現音樂</router-link></li> <li role="presentation"><router-link to="/my">我的音樂</router-link></li> <li role="presentation"><router-link to="/friend">朋友</router-link></li> </ul> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> </div> </div> </div> <script> var find = Vue.extend({template: "<h1>發現音樂</h1>"}); var my = Vue.extend({template: "<h1>我的音樂</h1>"}); var friend = Vue.extend({template:"<h1>朋友</h1>"}); var routes = [ {path: "/find",component: find}, {path: "/my",component: my}, {path: "/friend",component: friend}, {path: "/",component:find} ] const router = new VueRouter({routes}); new Vue({router}).$mount("#app"); </script> ~~~ 解釋： 1. 在`vue-router`中，使用`<router-link>`來加載鏈接，然后使用`to`表示跳轉的鏈接。`vue-router`最終會把`<router-link>`渲染成`<a>`標簽。 2. `<router-view>`是路由的出口，也就是相應`url`下的代碼會被渲染到這個地方來。 3. `Vue.extend`是用來加載模板的。 4. `routes`是定義一個`url`與組件的映射，這個就是路由。 5. `VueRouter`創建一個路由對象。 ## 動態路由： 在路由中有一些參數是會變化的，比如查看某個用戶的個人中心，那肯定需要在`url`中加載這個人的`id`，這時候就需要用到動態路由了。 ~~~ <div id="app"> <router-link to="/user/123">個人中心</router-link> <router-view></router-view> </div> <script> let UserProfile = {template:"<h1>個人中心：{{$route.params.userid}}</h1>"} var routes = [ {path: "/user/:userid",component: UserProfile} ] const router = new VueRouter({routes}); new Vue({router}).$mount("#app"); </script> ~~~ 解釋： 1. `:userid`：動態的參數。 2. `this.$route.params`：這個里面記錄了路由中的參數。 ## 組件復用： 當使用路由參數時，例如從`/user/foo`導航到`/user/bar`，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用。 復用組件時，想對路由參數的變化作出響應的話，你可以簡單地`watch(監測變化)``$route`對象： ~~~ const User = { template: '...', watch: { '$route' (to, from) { // 對路由變化作出響應... } } } ~~~ 或者是使用后面跟大家講到的**導航守衛**： ~~~ const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } } ~~~ ## 匹配404錯誤： 在路由規則中，`*`代表的是任意字符。所以只要在路由的最后添加一個`*`路由，那么以后沒有匹配到的`url`都會被導入到這個視圖中。 ~~~ let UserProfile = {template:"<h1>個人中心：{{$route.params.userid}}</h1>"}; let NotFound = {template: "<h1>您找的頁面已經到火星啦！</h1>"} var routes = [ {path: "/user/:userid",component: UserProfile}, {path: "*",component: NotFound}, ] ~~~ ## 嵌套路由： 有時候在路由中，主要的部分是相同的，但是下面可能是不同的。比如訪問用戶的個人中心是`/user/111/profile/`，查看用戶發的貼子是`/user/111/posts/`等。這時候就需要使用到嵌套路由。 ~~~ const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 當 /user/:id/profile 匹配成功， // UserProfile 會被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 當 /user/:id/posts 匹配成功 // UserPosts 會被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] } ] }); ~~~ ## 編程式導航： 之前我們學習了使用`<router-link>`可以在用戶點擊的情況下進行頁面更新。但有時候我們想要在`js`中手動的修改頁面的跳轉，這時候就需要使用編程式導航了。 #### `$router.push`跳轉： 想要導航到不同的`URL`，則使用`router.push`方法。這個方法會向`history`棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的`URL`。 當你點擊`<router-link>`時，這個方法會在內部調用，所以說，點擊`<router-link :to="...">`等同于調用`router.push(...)`。 | 聲明式 | 編程式 | | --- | --- | | `<router-link :to="...">` | `router.push(...)` | ~~~ // 字符串 router.push('home') // 對象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 帶查詢參數，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) ~~~ **注意：如果提供了**`path`**，**`params`**會被忽略，上述例子中的**`query`**并不屬于這種情況。取而代之的是下面例子的做法，你需要提供路由的**`name`**或手寫完整的帶有參數的**`path`**：** ~~~ const userId = '123' router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 這里的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /user ~~~ #### `router.replace(location, onComplete?, onAbort?)`： 跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。 | 聲明式 | 編程式 | | --- | --- | | `<router-link :to="...">` | `router.push(...)` | #### `router.go(n)`： 這個方法的參數是一個整數，意思是在`history`記錄中向前或者后退多少步，類似`window.history.go(n)`。 ~~~ // 在瀏覽器記錄中前進一步，等同于 history.forward() router.go(1) // 后退一步記錄，等同于 history.back() router.go(-1) // 前進 3 步記錄 router.go(3) // 如果 history 記錄不夠用，那就默默地失敗唄 router.go(-100) router.go(100) ~~~ ## 命名路由： 有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候。你可以在創建`Router`實例的時候，在`routes`配置中給某個路由設置名稱。 ~~~ const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] }) ~~~ 要鏈接到一個命名路由，可以給`router-link`的`to`屬性傳一個對象： ~~~ <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> ~~~ 這跟代碼調用 router.push() 是一回事： ~~~ router.push({ name: 'user', params: { userId: 123 }}) ~~~ ## 命名視圖： 有時候想同時 (同級) 展示多個視圖，而不是嵌套展示，例如創建一個布局，有`sidebar`(側導航) 和`main`(主內容) 兩個視圖，這個時候命名視圖就派上用場了。你可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口。如果`router-view`沒有設置名字，那么默認為`default`。 ~~~ <router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view> ~~~ 一個視圖使用一個組件渲染，因此對于同個路由，多個視圖就需要多個組件。確保正確使用`components`配置 (帶上`s`)： ~~~ const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] }) ~~~ ## 重定向和別名： 重定向也是通過`routes`配置來完成，下面例子是從`/a`重定向到`/b`： ~~~ const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) ~~~ 重定向的目標也可以是一個命名的路由： ~~~ const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] }) ~~~ “重定向”的意思是，當用戶訪問`/a`時，`URL`將會被替換成`/b`，然后匹配路由為`/b`，那么“別名”又是什么呢？ `/a`的別名是`/b`，意味著，當用戶訪問`/b`時，`URL`會保持為`/b`，但是路由匹配則為`/a`，就像用戶訪問`/a`一樣。 上面對應的路由配置為： ~~~ const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ] }) ~~~ ## 官方文檔： 更多內容請參考`vue-router`官方文檔：`https://router.vuejs.org/zh/`