Vue-4 路由

Vue-4 路由的配置和调用，命名路由和命名视图，嵌套路由，重定向和别名

博主wx: -GuanEr-，加博主进前端交流群

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
  ]
});

---

扫码拉你进入前端技术交流群