1.前端路由和後端路由的區別

首先要搞懂路由的概念，所謂的路由指的是根據不同的url執行相應的操作，比如點選百度新聞時，當點選國內按鈕，則對應的地址為http://news.baidu.com/guonei，點選國際按鈕時，對應的地址為http://news.baidu.com/guoji，它只是將guonei改為了guoji，當後臺接收到該url時，會進行判斷，如果最後邊的字串為guonei，則將此請求傳送給處理國內邏輯的程式碼，如果為guoji，則將請求發給處理國際邏輯的程式碼，而負責轉發請求的操作就是路由負責的事情
後端路由是對傳遞的url進行轉發和響應，它是由後端程式控制
因為vue是但元件頁面，所以在最後生成的檔案中只有一個頁面，那麼如何動態的顯示不同的元件，這就需要前端路由完成了，和url類似，它也是根據傳遞的字串進行動態切換當前頁面
vue-router就是用來處理vue中路由跳轉等功能的一個外掛，對應的網址為

2.hello world

先通過vuecli建立一個新專案，在建立時可以選擇預設安裝vue-router的方式，當專案建立好之後，對應的配置也完成了，在專案中就可以直接使用路由功能了
為了搞清楚它在建立專案時具體配置了哪些東西，本次不使用預設的方式安裝，而是通過手動的方式一步步配置
使用vuecli建立一個不帶vue-router功能的專案
在使用路由功能前需要先對其進行安裝

npm install vue-router

當出現此提示時表名路由已經安裝成功
專案建立好之後需要在main.js中配置外掛

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')
 

其中router是通過router目錄下的index.js檔案匯出的一個vuerouter物件

將其單獨放在一個目錄下便於後期的管理
在index.js中首先匯入vuerouter物件中的createRouter方法

import { createRouter, createWebHistory } from 'vue-router'

接著配置跳轉url和對應元件的資訊

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
 

這是一個數組，其中每個下標中存放著url和元件對應的資訊，第一個是通過引用已載入的元件，第二個則是隻有當此路徑使用時才會載入對應的元件，稱之為懶載入

const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

最後將配置項陣列傳給createRouter方法，它會根據配置項返回建立好的router，接著將此物件匯出，這樣在main.js中就可以直接使用了
添加了路由功能後，如果想使用則需要指定路由頁面渲染的地方，此配置是在App.vue中配置的

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view>
  </router-view></div>
</template>

vue-router會根據配置的路由資訊，將對應的元件內容放在標籤處，router-link配置的就是路由中的資訊，根據to指定的路徑動態切換顯示的元件
啟動專案後訪問根路徑，根據配置可知預設會顯示Home元件

點選About後頁面會切換為About元件中的內容

可以看到當點選連結後頁面並沒有整體重新整理，變化的只有url後的路徑和頁面特定部分的內容，此效果就是vue-router提供的路由功能

3.前端路由監聽url改變的兩種方式

對於url變化後切換頁面目前有兩種模式，第一種為history模式，另一種為hash模式
前端路由的本質是當url發生改變時不重新整理頁面，這兩種模式都可以實現此效果，區別在於hash模式在url中會帶一個#，而history並不會
它們都是基於瀏覽器自帶的功能實現的，一般開發中使用最多的就是history模式了，它對應底層的history.pusState方法

4.動態路由、巢狀路由與引數傳遞

除了則頁面上使用之外，當vuerouter被註冊到vue例項中後，vue提供了$router和$route對路由進行操作

動態路由

首先將home的連結進行修改

<router-link to="/home">Home</router-link> |

在router的index.js中進行配置

const routes = [
  {
    path: '/:aa',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

此處的path中對應的就是動態路由，當頁面上訪問/about或者/home時都會跳轉到About元件介面，而它們後面的路徑則會存放在aa變數中，變為了路由的引數，此引數值通過this.$route即可獲取

巢狀路由

普通路由是將整個頁面的內容替換掉，而巢狀路由是替換指定的部分，比如點選tab頁切換內容，被切換的部分就是巢狀路由實現的
在About元件中新增巢狀路由需要顯示的位置

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>巢狀路由</h1>
    <router-view>
  </router-view></div>
</template>

重新建立兩個元件

在需要展示巢狀路由的中元件下使用children配置路由

const routes = [
  {
    path: '/:aa',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    children: [
      {
        path: 'c1',
        name: 'AboutC1',
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutC1.vue'),
      },
      {
        path: '/c2',
        name: 'AboutC2',
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutC2.vue'),
      },
    ]
  }
]

巢狀路由有兩種訪問方式，如果在path中新增/，那麼就使用絕對路徑訪問，否則需要新增父路由路徑

5.全域性、元件、路由內導航守衛

導航守衛就是類似於現實中的一個哨兵，用於實現路由發生變化需要時需要做的功能，在vue-router中通過beforeEach函式實現，根據作用域不同可分為全域性、元件內、路由內三種類型
建立好router物件後，呼叫導航守衛方法

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  console.log('導航守衛。。。', to)
  next()
})

當頁面上的路由變化時就可以被導航守衛監聽到

如果不想讓此次路由跳轉生效，只需要將next方法移除

6.keep-alive

keep-alive是vue的內建元件，主要的作用就是將不活動的頁面快取起來而不是銷燬，在一定程度上可以提升效能
使用方式很簡單，只需要用此元件將router-view包裹起來

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>巢狀路由</h1>
    <keep-alive>
      <router-view>
    </router-view></keep-alive>
  </div>
</template>

在頁面啟用時會呼叫activated方法，頁面被快取時呼叫deactivated方法，用法和生命週期方法相同