Vue Router--- 路由導航

該版權歸原做者全部，此處僅做交流學習。

參考網址：https://cn.vuejs.org/v2/guide/components-registration.html

 

Vue Router 是 Vue.js 官方的路由管理器。

它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。

包含的功能有：

• 嵌套的路由/視圖表
• 模塊化的、基於組件的路由配置
• 路由參數、查詢、通配符
• 基於 Vue.js 過渡系統的視圖過渡效果
• 細粒度的導航控制
• 帶有自動激活的 CSS class 的連接
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行爲

 

 

一、npm安裝：

　　npm install vue-router

　　

 

二、實例

經過組合組件來組成應用程序，要把 Vue Router 添加進來，須要將組件 (components) 映射到路由 (routes)，而後告訴 Vue Router 在哪裏渲染它們，基本實例：

 

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 組件來導航. --> <!-- 經過傳入 `to` 屬性指定連接. --> <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這裏 --> <router-view></router-view> </div> 

JavaScript

// 0. 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter) // 1. 定義 (路由) 組件。 // 能夠從其餘文件 import 進來 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定義路由 // 每一個路由應該映射一個組件。 其中"component" 能夠是 // 經過 Vue.extend() 建立的組件構造器， // 或者，只是一個組件配置對象。
 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 建立 router 實例，而後傳 `routes` 配置 // 你還能夠傳別的配置參數, 不過先這麼簡單着吧。 const router = new VueRouter({ routes // (縮寫) 至關於 routes: routes }) // 4. 建立和掛載根實例。 // 記得要經過 router 配置參數注入路由， // 從而讓整個應用都有路由功能 const app = new Vue({ router }).$mount('#app') // 如今，應用已經啓動了！

 

三、動態路由匹配

例如，咱們有一個 User 組件，對於全部 ID 各不相同的用戶，都要使用這個組件來渲染。

那麼，咱們能夠在 vue-router 的路由路徑中，使用「動態路徑參數」 來達到這個效果：

 

const User = { template: '<div>User {{ $route.params.id }}</div>'
} 

const router = new VueRouter({
 routes

四、嵌套路由

由多層嵌套的組件組成。

<div id="app"> <router-view></router-view> </div> 

const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] })

 

這裏的  是最頂層的出口，渲染最高級路由匹配到的組件。一樣地，一個被渲染組件一樣能夠包含本身的嵌套 。

例如，在  組件的模板添加一個 

<router-view><router-view>User<router-view>

 

const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` }

要在嵌套的出口中渲染組件，須要在 VueRouter 的參數中使用 children 配置：

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.beforeEach 註冊一個全局前置守衛：

全局後置守衛：const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })

router.afterEach((to, from, next) => { // ... })

• to: Route: 即將要進入的目標 路由對象（到哪裏去）

• from: Route: 當前導航正要離開的路由 （從哪裏來）

• next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

六、路由獨享守衛

能夠在路由配置上直接定義 beforeEnter 守衛：

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })

七、組件內守衛

能夠在路由組件內直接定義如下路由導航守衛：

• beforeRouteEnter
• beforeRouteUpdate 
• beforeRouteLeave

 

實例：

const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染該組件的對應路由被 confirm 前調用 // 不！能！獲取組件實例 `this` // 由於當守衛執行前，組件實例還沒被建立 }, beforeRouteUpdate (to, from, next) { // 在當前路由改變，可是該組件被複用時調用 // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候， // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。 // 能夠訪問組件實例 `this` }, beforeRouteLeave (to, from, next) { // 導航離開該組件的對應路由時調用 // 能夠訪問組件實例 `this` } }