Vue-4 路由的配置和調用，命名路由和命名視圖，嵌套路由，重定向和別名

Vue-4 路由的配置和調用，命名路由和命名視圖，嵌套路由，重定向和別名

Vue-router的安裝和基本配置

路由是 Vue 通過操作切換或調用組件的另一種方式。

常見應用場景就是後臺管理系統中的選項卡操作。

比如某個後臺管理系統的側邊欄有商品管理、用戶管理、訂單管理選項，在點擊左側的菜單時，右側內容部分展示對應的管理模塊。

要在 vue-cli 中使用 vue 的路由，要先在當前項目中安裝 vue-router 依賴包，加以配置之後才能使用。

路由是 vue-cli 項目必備的功能，所以一般情況下，在安裝項目時，會在是否安裝路由這裏選擇 yes。

如果在安裝項目的同時就安裝了路由，那麼項目的 src 文件夾中會自動有一個 router 的文件夾，路由已經被配置好了。只需要向裏面添加內容就好了。

但是我們還是要了解路由配置的整個過程。

如果沒有在初始化項目模板時安裝路由，那麼路由的配置總共需要以下幾個步驟。

1. 安裝vue-router依賴包

npm i vue-router --save

2. 配置路由

路由一般都配置在 src 文件夾中：

// 項目的src目錄
src
    └── App.vue
    └── main.js
    └── assets
    └── components
            └── good-list.vue
            └── user-list.vue
            └── order-list.vue
    └── router // 路由配置文件夾
            └── index.js // 路由配置文件

路由配置文件 index.js：

// router>index.js

import Vue from 'vue' 
// 導入路由依賴包
import Router from 'vue-router'

// 導入被路由的組件，每個路由應該映射一個組件，要配置三個菜單路由，就應該映射到三個組件
import GoodList from './components/good-list'
import UserList from './components/user-list'
import OrderList from './components/order-list'

Vue.use(Router)

// 創建 vueRouter 實例，並導出
export default new Router({
  routes: [
    // 一個路由用一個對象包裹，對象中的每個鍵值對代表不同的意義
    // 我們先介紹 path 和 component  
    { path: '/good-list', component: GoodList },
    { path: '/user-list', component: UserList },
    { path: '/order-list', component: OrderList }
  ]
});

此時路由還不能使用，因爲當前的 index.js 只是一個單獨的 js 文件，想要使用，還需要將 router 實例導入到根組件的實例化中。

// main.js
import Vue from 'vue'
import App from './App'

// 從 router>index.js 文件中導入 router 實例
import router from './router'

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  // 將 router 作爲參數傳到這裏，整個項目就能使用路由了
  router, 
  components: { App },
  template: '<App/>'
})

3. 調用路由

<!-- home.vue -->
<template>
    <div class="home">
        <!-- 
            錨點：
            用router-link標籤，提供切換視圖的動作。
            to屬性的值是路由配置中的path
        -->
        <router-link to="/good-list">商品列表</router-link>
        <router-link to="/user-list">用戶列表</router-link>
        <router-link to="/order-list">訂單列表</router-link>

        <!-- 
            顯示路由視圖
            點擊 router-link 菜單，在 router-view 所在的位置渲染該 path 對應的 component
         -->
        <router-view />
    </div>
</template>

有時候切換組件不會通過錨點，而是在代碼執行並完成了某些操作之後。比如點擊登錄按鈕，只有在登錄成功之後才顯示首頁。那麼路由組件的切換就是在登錄成功的回調函數中執行，這個時候就不能用錨點，而是 JS 跳轉。

// ...
login() {
    setTimeout(() => {
        // 3s 之後切換路由
        this.$router.push('/user-list');
        /* 
        也可以這樣寫:
        this.$router.push({
            path: '/user-list'
        });
        */
    }, 3000);
}
// ...

命名路由和命名視圖

1. 命名路由

除了利用 path 屬性調用路由之外，我們還可以在配置路由時，爲每個路由設置一個 name 值，然後通過 name 值調用路由，兩種方式有各自的應用場景。我們先說命名路由的使用。

// router>index.js 中的 routes
routes: [ 
    { 
      path: '/good-list', 
      component: GoodList,
      // 爲路由命名，這個名稱不一定和 path 保持一致
      // 但是一般情況下，我們遵從見名知意的規則
      name: 'good-list' 
    },
    { 
      path: '/user-list',
      component: UserList,
      name: 'user-list'
    },
    { 
      path: '/order-list',
      component: OrderList,
      name: 'order-list'
    }
]

調用命名路由：

<!-- to屬性中是一個對象，所以要對 to 屬性使用 v-bind 指令 -->
<router-link :to="{name: 'good-list'}">商品列表</router-link>
<router-link :to="{name: 'user-list'}">用戶列表</router-link>
<router-link :to="{name: 'order-list'}">訂單列表</router-link>

// js 調用
this.$router.push({
    name: 'user-list'
});

2. 命名視圖

同時 (同級) 展示多個組件，可以讓所有組件通過作爲子組件被同一個父組件調用，也可通過 <router-view> 標籤的 name 屬性同級展示多個視圖。在配置時需要使用 components 而不是 component。

// router>index.js 中的 routes 
routes: [
    {
      path: '/',
      components: {
        /* 
            當路由路徑爲 '/' 時
            router-view 標籤如果不設置 name 屬性，就渲染 GoodList 組件
            router-view name 值爲 user-list 時，渲染 UseList 組件
            router-view name 值爲 order-list 時，渲染 OrderList 組件

            它們可以渲染一個，也可以被同時渲染，不互斥
        */
        default: GoodList, // 可選
        'user-list': UserList,
        'order-list': OrderList
      }
    }
]

調用命名視圖：

...
<router-view />
<router-view name="user-list"/>
<router-view name="order-list"/>
...

注：
如果一個組件的父組件是固定的，比如導航，側邊欄，頁面內容，那就使用子組件導入父組件的方式調用它們。
如果一個組件，可能會被很多不同的組件調用，那麼每個調用它的父組件都要先導入該組件，傳入實例的 components 才能使用，那樣太麻煩了，又造成了無法解決的莫名其妙的代碼冗餘。這種場景就使用命名視圖，代碼會更簡潔。

嵌套路由和路由的封裝

有時候某個路由組件中會包含屬於這個組件本身的路由操作。如 Angular 的官網。

現在給一個示例，比如一級菜單有商品列表，用戶列表，訂單列表。訂單列表中還可以有全部，已付款，已發貨等操作。切換子菜單也可以切換內容。

這種情況我們就要使用到子路由的配置。

// router>index.js 中的routes
routes: routes: [
    { 
      path: '/good-list', 
      component: GoodList
    },
    { 
      path: '/user-list',
      component: UserList
    },
    { 
      path: '/order-list',
      component: OrderList,
      // order-list 的子路由配置在 children 中
      children: [
        {
          // 子路由配置時不加 '/'
          // 加 '/' 代表一級路由，就和 order-list 同級了
          path: 'order-list-1',component: OrderList1
        },
        {
          path: 'order-list-2', component: OrderList2
        },
        {
          path: 'order-list-3', component: OrderList3
        }
      ]
    }
]

在 <OrderList> 組件中調用其子路由：

<div class="order-list">
    <!-- 調用子路由，要加父級路徑 -->
    <router-link to="/order-list/order-list-1">全部</router-link>
    <router-link to="/order-list/order-list-2">待付款</router-link>
    <router-link to="/order-list/order-list-3">待收貨</router-link>

    <!-- 渲染子路由視圖 -->
    <router-view />
</div>

如果子路由中還需要子路由，那就在子路由中繼續寫。 children。

如果路由的配置結構特別複雜，可能要嵌套多級路由，我們可以按模塊將路由單獨封裝，最終引入到 router 中的 index.js 裏。

// router>order-list.js

import OrderList from '@/components/OrderList'
import OrderList1 from '@/components/OrderList1'
import OrderList2 from '@/components/OrderList2'
import OrderList3 from '@/components/OrderList3'

// 將 order-list 的配置導出
export default {
  path: '/order-list',
  component: OrderList,
  children: [{
      path: 'order-list-1',
      component: OrderList1
    },
    {
      path: 'order-list-2',
      component: OrderList2
    },
    {
      path: 'order-list-3',
      component: OrderList3
    }
  ]
};

// router>index.js
import Vue from 'vue'
import Router from 'vue-router'

import GoodList from '@/components/GoodList'
import UserList from '@/components/UserList'

// 導入 order-list 配置
import OrderList from './order-list'

Vue.use(Router)

export default new Router({
  routes: [
    { 
      path: '/good-list', 
      component: GoodList
    },
    { 
      path: '/user-list',
      component: UserList
    },
    OrderList
  ]
});

注：
這樣的封裝不會對 main.js 中的配置有任何影響，main.js 中依舊只引入 router.js，在實例化時傳入 router。

重定向和別名

1. 重定向
有時候一個組件中的子路由有很多，但是我們在切換到這個組建時，希望能展示其中的某個子路由內容，不然頁面會出現留白，用戶體驗很差。

// router>order-list.js 
export default {
  path: '/order-list',
  component: OrderList,
  // 重定向，當菜單切換到order-list時，order-list-1的內容會默認顯示
  // 頁面中不會出現留白
  redirect: '/order-list/order-list-1'
  children: [{
      path: 'order-list-1',
      component: OrderList1
    },
    {
      path: 'order-list-2',
      component: OrderList2
    },
    {
      path: 'order-list-3',
      component: OrderList3
    }
  ]
};

這樣能實現效果，但是如果子路由嵌套太多，redirect 要拼接的父級路由就特別長，這種情況可以用命名路由：

// router>order-list.js 
export default {
  path: '/order-list',
  component: OrderList,
  redirect: {
      // 不用拼接冗長的路徑
      name: 'order-list-1'
  }
  children: [{
      path: 'order-list-1',
      component: OrderList1,
      name: 'order-list-1'
    },
    {
      path: 'order-list-2',
      component: OrderList2
    },
    {
      path: 'order-list-3',
      component: OrderList3
    }
  ]
};

2. 別名

Vue 也允許我們爲某個路由起一個別名，訪問這個別名也是在訪問這個路由。

// router>index.js 
export default new Router({
  routes: [
    { 
      path: '/good-list', 
      component: GoodList,
      // 路由的路徑爲 '/another-name' 時就代表 '/good-list'
      alias: '/another-name'
    },
    { 
      path: '/user-list',
      component: UserList
    },
    OrderList
  ]
});