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