一、什么是路由赁咙？

• 路由是通過互聯(lián)的網(wǎng)絡(luò)把信息從源地址傳輸?shù)侥康牡刂返幕顒?/li>
• 路由中有個非常重要的概念叫路由表钮莲，本質(zhì)上就是一個映射表，決定了數(shù)據(jù)包的指向彼水。

二崔拥、什么是前端渲染，什么是后端渲染（服務(wù)端渲染）凤覆？

（1）后端路由

• 早期網(wǎng)頁握童，用的基本都是后端渲染。當時沒有js叛赚，用的是（jsp/php）澡绩，后端渲染對seo優(yōu)化要好一些，瀏覽器輸入網(wǎng)址俺附，就會把url發(fā)到服務(wù)器肥卡，服務(wù)器拿到地址以后，早期會進行一個解析事镣，在后臺通過一個jsp的技術(shù)步鉴，會把網(wǎng)頁給你寫好，里面包含html和css以及一些java代碼璃哟。java代碼作用就是從數(shù)據(jù)庫讀取數(shù)據(jù)氛琢，并且動態(tài)的放在頁面中，也就是說在瀏覽器沒有呈現(xiàn)頁面以前随闪，頁面就已經(jīng)生成了阳似。生成的頁面直接傳給瀏覽器，傳給瀏覽器的頁面只有html和css铐伴，這就是最早期的頁面撮奏。
• 以上的官方解釋就是：
  1.早期的網(wǎng)站開發(fā)，整個HTML頁面是由服務(wù)器來渲染的当宴。
  2.服務(wù)器直接渲染好對應(yīng)的html頁面畜吊，返回給客戶端展示。
  3.一個頁面有自己對應(yīng)的網(wǎng)址户矢，也就是url玲献，url會發(fā)送到服務(wù)器，服務(wù)器會通過正則對該url進行匹配梯浪，并且交給一個Controller進行處理捌年。
  4.Controller進行各種處理，最終生成HTML或者數(shù)據(jù)驱证，返回給前端延窜，這就完成了一個I/O操作。
  以上這種操作就是后端路由
  1.當我們頁面中需要請求不同的路徑內(nèi)容時抹锄，交給服務(wù)器來進行處理逆瑞，服務(wù)器渲染好整個頁面，并且將頁面返回給客戶端伙单，這種情況下渲染好的頁面获高，不需要單獨加載任何的js和css，可以直接交給瀏覽器顯示吻育，這樣也有利于seo優(yōu)化念秧。
• 后端路由的缺點：
  1.整個頁面的模塊都需要后端人員編寫和維護。
  2.前端開發(fā)人員如果要開發(fā)頁面布疼，需要通過php/java等語言來編寫頁面代碼摊趾。
  3.通常情況下html代碼和數(shù)據(jù)以及對應(yīng)的邏輯會混在一起币狠，編寫和維護都是非常糟糕的事情。

（2）前后端分離階段

• 這個階段后端只負責提供數(shù)據(jù)砾层，不負責任何階段的內(nèi)容漩绵。
• 隨著ajax的出現(xiàn)，有了前后端分離的概念肛炮，后端只提供api接口來返回數(shù)據(jù)止吐，前端通過ajax獲取數(shù)據(jù)，并且可以通過js將數(shù)據(jù)渲染到頁面中侨糟。
• 這樣做的優(yōu)點就是前后端責任清晰碍扔，后端專注于數(shù)據(jù)上，前端專注于交互和可視化上秕重。
• 并且當移動端（ios/安卓）出現(xiàn)后不同，后端不需要進行任何的處理，依然使用之前的一套api即可悲幅。目前很多網(wǎng)站依然使用這種模式開發(fā)套鹅。

（3）單頁面富應(yīng)用階段

• SPA頁面最主要的特點就是在前后端分離的基礎(chǔ)上加上了一層前端路由，也就是前端老維護一套路由的規(guī)則汰具。

（4）前端路由

• 前端路由的核心是改變url整個頁面不刷新卓鹿。

三、vue-router安裝和配置

安裝：

npm install vue-router --save

• 在模塊化工程中使用它（因為它是一個插件留荔，所以可以通過Vue.use()來安裝路由功能）
  1.導(dǎo)入路由對象吟孙，并且調(diào)用Vue.use(VueRouter)
  2.創(chuàng)建路由實例，并且轉(zhuǎn)入路由映射配置
  3.在Vue實例中掛載創(chuàng)建的路由實例
• 在router文件夾中創(chuàng)建一個index.js聚蝶，導(dǎo)入vue-router
  1.Vue.use(VueRouter)

const router = new VueRouter({
  routes: [] // 路由的映射關(guān)系
})

然后我們在main.js中掛載一下router就可以搭好路由的基本配置了杰妓，下面我們就可以在routes中設(shè)置路由的映射關(guān)系了。

• 路由的映射關(guān)系：

const routes = [
  {
    path: '/home',
    component: null
  },
  {
     path: '/about',
     component: null
  }
]

使用vue-router的步驟

1.創(chuàng)建路由組件
2.配置路由映射：組件和路徑的映射關(guān)系
3.使用路由：通過<router-link>和<router-view>

• router-link 該標簽是一個路由內(nèi)置的組件碘勉，會被渲染成a標簽巷挥。
• router-view 該標簽會根據(jù)當前的路徑，動態(tài)渲染出不同的組件
• 網(wǎng)頁的其他內(nèi)容验靡，比如頂部的標題/導(dǎo)航倍宾，或者底部的一些版權(quán)信息等，會和router-view在同一個等級胜嗓。
• 在路由切換時高职，切換的是router-view掛載的組件，其他內(nèi)容不會發(fā)生改變辞州。

路由的默認值改為history模式

• 默認情況下就是hash模式怔锌，也就是說在路徑中帶著#，顯得不是很專業(yè)。
  怎么修改呢埃元？

const router = new VueRouter({
  routes: [], // 路由的映射關(guān)系
  mode: 'history'  // 配置這個屬性以后涝涤，就可以實現(xiàn)把默認的hash模式改為history模式。
})

• 通過上面的配置亚情，此時就會發(fā)現(xiàn)路徑中不會帶有#這樣的hash格式了妄痪。

router-link補充

• to屬性，用于跳轉(zhuǎn)指定的路徑
  <router-link to='/home'></router-link>
• tag屬性楞件，可以指定router-link之后渲染成什么組件，比如下面的代碼會被渲染成一個button組件裳瘪。
  <router-link tag='button'></router-link>
• replace屬性土浸，replace不會留下history記錄，所以指定replace的情況下彭羹，后退鍵返回不能返回到上一個頁面中黄伊。
  <router-link tag='button' replace></router-link>
• active-class屬性，當router-link對應(yīng)的路由匹配成功時派殷，會自動給當前元素一個router-link-active的class还最，設(shè)置active-class可以修改默認名稱。
  在進行高亮顯示的導(dǎo)航菜單或者底部的tabbar時毡惜，會使用到該類拓轻。
  但是通常不會修改該類，會直接使用默認的router-link-active即可经伙。
  <router-link tag='button' replace active-class='active'></router-link>
  這里也可以全局修改默認的router-link-active類扶叉，通過修改路由相關(guān)配置文件index.js，增加一個linkActiveClass就可以實現(xiàn)對這個類名稱的自定義帕膜。

const router = new VueRouter({
  routes: [], // 路由的映射關(guān)系
  mode: 'history',
  linkActiveClass: 'active'
})

通過代碼跳轉(zhuǎn)路由

• 如果我們不通過router-link的to屬性去跳轉(zhuǎn)到指定的路由枣氧，那么我們也可以通過js去控制路由的跳轉(zhuǎn)
  this.$router.push('/home')或者this.$router.replace('/home')，push帶有返回按鈕

四垮刹、動態(tài)路由

• 有時候一個頁面的path是不確定的达吞，有時候后面會跟著一些參數(shù)，這種路徑我們稱之為動態(tài)路由荒典。

const routes = [
  {
    path: '/home',
    component: null
  },
  {
     path: '/about',
     component: null
  },
  {
    path: '/user/:id',// 這里的id就是要配置的動態(tài)路由
    component: null
  }
]

• $route指的是當前哪個路由處于活躍狀態(tài)

this.$route.params.id通過這種方式我們就可以拿到url中的參數(shù)值酪劫。

• $router指的是我們在入口出new的router對象

五、路由的懶加載

• 當打包構(gòu)建應(yīng)用時种蝶，js包會變得非常大契耿，影響頁面的加載，如果我們能把不同路由對應(yīng)的組件分成不同的代碼塊螃征，然后當路由訪問時才加載對應(yīng)組件搪桂，這樣就比較高效了。這時候就需要用到路由的懶加載。
  具體代碼寫法如下：

const Home = () => import('../components/Home');
const routes = [
    {
        path: '/home',
        component:  Home
    }
]

六踢械、路由的嵌套

• 嵌套路由是一個很常見的功能酗电，比如我們在home頁面中，希望通過/home/news和/home/message訪問一些內(nèi)容
• 一個路徑映射一個組件内列，訪問這兩個路徑撵术，也會分別渲染這兩個組件

實現(xiàn)嵌套路由的兩個步驟

1.創(chuàng)建對應(yīng)的子組件，并且在路由映射中配置對應(yīng)的子路由话瞧。
2.在組件內(nèi)部使用<router-view>標簽嫩与。

const Home = () => import('../components/Home');
const HomeNews = () => import('../components/HomeNews');
const HomeMessage = () => import('../components/HomeMessage ');
const routes = [
    {
        path: '/home',
        component:  Home,
        children: [
            {
                path: '',
                redirect: 'news'// 默認顯示新聞頁
            },
            {
                path: 'news',
                component: HomeNews
            },
            {
                 path: 'message',
                 component: HomeMessage
            }
        ]
    }
]

七、路由參數(shù)傳遞

• 傳遞路由有兩種方式：params和query
  1.params類型：
  （1）配置路由格式：/router/:id
  （2）傳遞方式：在path后面跟上對應(yīng)的值
  （3）傳遞后形成的路徑：/router/123,/router/abc

const routes = [
  {
    path: '/profile:id',
    component: 'Profile'
  }
]

頁面中取出某個參數(shù)：$route.params.id
2.query類型：
（1）配置路由格式：/router交排，也就是普通的配置
（2）傳遞的方式：對象中使用query的key作為傳遞方式
（3）傳遞后的路徑：/router?id=123

<router-link :to={ path: '/router', query: { name: 'aaa', age: 18 }}></router-link>

頁面中取出某個參數(shù)：$route.query.name
3.通過點擊事件實現(xiàn)路由傳遞參數(shù)

methods: {
  // params方式
  userClick () {
    this.$router.push('/user/' + this.userId)
  },
// query 方式
  proFileClick () {
    this.$router.push({
      path:'/profile',
      query: {
        name: 'kobe',
        age: 18
      }
    })
  },
}

4.$route 和 $router的區(qū)別

• $route 指的是當前活躍的路由划滋，$router指的是路由本身，里面包含了很多方法埃篓。
• 所有的組件都繼承自vue的原型

八处坪、vue-router的全局導(dǎo)航守衛(wèi)

1. 全局守衛(wèi)

• 意思就是對路由來回跳轉(zhuǎn)的時候進行一些監(jiān)聽，在跳轉(zhuǎn)的過程中有可能要做其他的事情架专。
• 以下代碼實現(xiàn)的是頁面跳轉(zhuǎn)變換頁面對應(yīng)的title:

router.beforeEach((to, from, next) => {
  // beforeEach叫做前置守衛(wèi)(hook)
  // meta 元數(shù)據(jù)（描述數(shù)據(jù)的數(shù)據(jù)）
  document.title = to.matched[0].meta.title;
  next('/login')
  // next可用于判斷是否登錄同窘，沒有登錄直接跳轉(zhuǎn)到登錄頁面
})

導(dǎo)航鉤子的三個參數(shù)解析：

• to:即將要進入的目標的路由對象
• from:當前導(dǎo)航即將要離開的路由對象
• next: 調(diào)用該方法后，才能進入下一個鉤子

補充：

• afterEach()后置守衛(wèi),路由跳轉(zhuǎn)結(jié)束后要做的一些事情部脚。

router.afterEach((to, from) =>  {
  console.log('aaa');
})

2. 路由獨享守衛(wèi)
3. 組件內(nèi)守衛(wèi)

九想邦、keep-alive以及其他問題

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

<keep-alive>
  <roouter-view />
</keep-alive>

• keep-alive有兩個重要的屬性：
  1.include - 字符串或者正則表達，只有匹配的組件才會被緩存
  2.exclude - 字符串或者正則表達钱雷，任何匹配的組件都不會被緩存

<keep-alive exclude='Profile,User'>
// 上面兩個組件之間最好不要加空格骂铁，會出現(xiàn)問題
  <roouter-view />
</keep-alive>

activated/deactivated只有在頁面使用了keep-alive保持狀態(tài)的時候才會起作用

注：

const router = new VueRouter({
  routes,
  mode: 'histroy', 
  // 這里使用history模式，代替hash模式罩抗，這樣的話在路徑中就不會出現(xiàn)類似hash的路徑格式拉庵。
})