注意:使用vue router掛載到Vue實例 的過程中抱Error in render: "TypeError: Cannot read property 'matched' of undefined"的錯誤這樣的錯誤，也是找了很久，其實這是因為創(chuàng)建的router實例是有命名規(guī)范的。將Router改為router，注意必須是router

默認情況下, 進入網(wǎng)站的首頁, 我們希望渲染首頁的內(nèi)容,但是我們的實現(xiàn)中, 默認沒有顯示首頁組件, 必須讓用戶點擊才可以.如何可以讓路徑默認跳到到首頁, 并且渲染首頁組件呢?非常簡單, 我們只需要配置多配置一個映射就可以了.

const  routes = [{path: '/',redirect: '/home'}]
// path配置的是根路徑: /
// redirect是重定向, 也就是我們將根路徑重定向到/home的路徑下, 這樣就可以得到我們想要的結(jié)果了.

改變路徑不刷新頁面的方式有兩種:

1. URL的hash
2. HTML5的history

默認情況下, 路徑的改變使用的URL的hash.如果希望使用HTML5的history模式, 非常簡單, 在映射表中進行如下配置即可

// 3. 創(chuàng)建router實例
const  router = new VueRouter({routes,mode: 'history'
})

中, 我們只是使用了一個屬性:?to, 用于指定跳轉(zhuǎn)的路徑.

還有一些其他屬性:

1. tag: tag可以指定之后渲染成什么組件, 比如上面的代碼會被渲染成一個
2. 元素, 而不是
3. replace: replace不會留下history記錄, 所以指定replace的情況下, 后退鍵返回不能返回到上一個頁面中
4. active-class: 當(dāng)對應(yīng)的路由匹配成功時, 會自動給當(dāng)前元素設(shè)置一個router-link-active的class, 設(shè)置active-class可以修改默認的名稱.

該class具體的名稱也可以通過router實例的屬性進行修改

// 3. 創(chuàng)建router實例
const  router = new VueRouter({routes,mode: 'history',linkActiveClass: 'active',
})

有時候, 頁面的跳轉(zhuǎn)可能需要執(zhí)行對應(yīng)的JavaScript代碼, 這個時候, 就可以使用第二種跳轉(zhuǎn)方式了
比如, 我們將代碼修改如下:

?

在某些情況下，一個頁面的path路徑可能是不確定的，比如我們進入用戶界面時，希望是如下的路徑：

/user/aaaa或/user/bbbb,除了有前面的/user之外，后面還跟上了用戶的ID這種path和Component的匹配關(guān)系，我們稱之為動態(tài)路由(也是路由傳遞數(shù)據(jù)的一種方式)。

1)創(chuàng)建組件user.vue

2)在路由表中添加映射

?

3)使用

?

1)官方給出了解釋

當(dāng)打包構(gòu)建應(yīng)用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(yīng)組件，這樣就更加高效了

2)官方在說什么呢?

首先, 我們知道路由中通常會定義很多不同的頁面.這個頁面最后被打包在哪里呢? 一般情況下, 是放在一個js文件中.但是, 頁面這么多放在一個js文件中, 必然會造成這個頁面非常的大.如果我們一次性從服務(wù)器請求下來這個頁面, 可能需要花費一定的時間, 甚至用戶的電腦上還出現(xiàn)了短暫空白的情況.如何避免這種情況呢? 使用路由懶加載就可以了.

3)路由懶加載做了什么?

路由懶加載的主要作用就是將路由對應(yīng)的組件打包成一個個的js代碼塊.只有在這個路由被訪問到的時候, 才加載對應(yīng)的組件

?

方式一: 結(jié)合Vue的異步組件和Webpack的代碼分析.

const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};

方式二: AMD寫法

const About = resolve => require(['../components/About.vue'], resolve);

方式三: 在ES6中, 我們可以有更加簡單的寫法來組織Vue異步組件和Webpack的代碼分割.

const Home = () => import('../components/Home.vue')

嵌套路由是一個很常見的功能

比如在home頁面中, 我們希望通過/home/news和/home/message訪問一些內(nèi)容.一個路徑映射一個組件, 訪問這兩個路徑也會分別渲染兩個組件.

路徑和組件的關(guān)系如下:

?

傳遞參數(shù)主要有兩種類型:?params和query

1)params的類型:

• 配置路由格式: /router/:id
• 傳遞的方式: 在path后面跟上對應(yīng)的值
• 傳遞后形成的路徑: /router/123, /router/abc

2)query的類型:

• 配置路由格式: /router, 也就是普通配置
• 傳遞的方式: 對象中使用query的key作為傳遞方式
• 傳遞后形成的路徑: /router?id=123, /router?id=abc

如何使用它們呢? 也有兩種方式: 的方式和JavaScript代碼方式

?

?

獲取參數(shù)通過$route對象獲取的.
在使用了vue-router的應(yīng)用中，路由對象會被注入每個組件中，賦值為?this.$route，并且當(dāng)路由切換時，路由對象會被更新。

通過$route獲取傳遞的信息如下:

<template><div id="profile"><h2>我是檔案標(biāo)題</h2><p>name:{{this.$route.query.name}}</p><p>age:{{this.$route.query.age}}</p></div>
</template>

$route和$router是有區(qū)別的

• $router為VueRouter實例，想要導(dǎo)航到不同URL，則使用$router.push方法
• $route為當(dāng)前router跳轉(zhuǎn)對象里面可以獲取name、path、query、params等

1)我們來考慮一個需求: 在一個SPA應(yīng)用中, 如何改變網(wǎng)頁的標(biāo)題呢?

網(wǎng)頁標(biāo)題是通過來顯示的, 但是SPA(單頁面富應(yīng)用)只有一個固定的HTML, 切換不同的頁面時, 標(biāo)題并不會改變.但是我們可以通過JavaScript來修改<title>的內(nèi)容.window.document.title = ‘新的標(biāo)題’.

2)那么在Vue項目中, 在哪里修改? 什么時候修改比較合適呢?

普通的修改方式:

我們比較容易想到的修改標(biāo)題的位置是每一個路由對應(yīng)的組件.vue文件中.通過mounted聲明周期函數(shù), 執(zhí)行對應(yīng)的代碼進行修改即可.但是當(dāng)頁面比較多時, 這種方式不容易維護(因為需要在多個頁面執(zhí)行類似的代碼).

有沒有更好的辦法呢? 使用導(dǎo)航守衛(wèi)即可.

3)什么是導(dǎo)航守衛(wèi)?

我們可以利用beforeEach來完成標(biāo)題的修改.

首先, 我們可以在鉤子當(dāng)中定義一些標(biāo)題, 可以利用meta來定義;其次, 利用導(dǎo)航守衛(wèi),修改我們的標(biāo)題.

//前置守衛(wèi)
router.beforeEach((to, from, next)=>{window.document.title = to.meta.title;next();
})
// 導(dǎo)航鉤子的三個參數(shù)解析:
//     to: 即將要進入的目標(biāo)的路由對象.
//     from: 當(dāng)前導(dǎo)航即將要離開的路由對象.
//     next: 調(diào)用該方法后, 才能進入下一個鉤子.

keep-alive?是?Vue?內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。

它們有兩個非常重要的屬性:

• include - 字符串或正則表達，只有匹配的組件會被緩存
• exclude - 字符串或正則表達式，任何匹配的組件都不會被緩存

router-view?也是一個組件，如果直接被包在?keep-alive?里面，所有路徑匹配到的視圖組件都會被緩存：

<keep-alive><router-view/> <!--所有路徑匹配到的視圖組件都會被緩存-->
</keep-alive>