1. 路由
概念： Hash 地址与组件之间的对应关系
工作方式：
当用户点击页面上的路由链接
导致了 URL 地址栏中的 Hash 值发生了变化
前端路由就会监听到 Hash 地址的变化
前端路由把当前 Hash 地址对应的组件渲染都浏览器中
2. vue-router`
vue-router 是 vue.js 官方给出的路由解决方案
2.1 vue-router 的基本用法
- 安装 vue-router 包
npm install vue-router@4
- 创建路由模块
在 src 源代码目录下，新建 router/index.js 路由模块，并初始化代码：
import { createRouter } from 'vue-router'
const routes = []
const router = createRouter({
routes
})
export default router
- 导入并挂载路由模块
在 src/main.js 入口文件中，导入并挂载路由模块
import { createApp } from 'vue'
import App from './App.vue'
// 导入路由模块
import router from './router'
// 通过 use(router)注册
createApp(App).use(router).mount('#app')
- 声明路由链接和占位符
在 需要使用的组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符
<template>
<div>
// 定义路由链接
<RouterLink to="/" />
// 定义路由占位符
<RouterView />
</div>
</template>
- 声明路由的匹配规则
在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则
import { createRouter } from 'vue-router'
// 创建路由的实例对象
const routes = [{
path: '/',
name: 'Layout',
component: () => import('@/views/Layout')
}]
const router = createRouter({
routes
})
export default router
2.2 路由重定向
指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面
通过路由规则的 redirect 属性，设置路由的重定向
2.3 children属性
通过 children 属性声明子路由规则
import { createRouter } from 'vue-router'
// 创建路由的实例对象
const routes = [{
path: '/',
name: 'Layout',
component: () => import('@/views/Layout')，
children: [
{
path: '/home',
name: 'Home',
component: () => import('@/views/home/')
}
}]
const router = createRouter({
routes
})
export default router
2.4动态路由
指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性
在 vue-router 中使用英文的冒号（:）来定义路由的参数项
import { createRouter } from 'vue-router'
// 创建路由的实例对象
const routes = [{
path: '/',
name: 'Layout',
component: () => import('@/views/Layout')，
children: [
{
path: '/category/:id',
name: 'TopCategory',
component: () => import('@/views/category/index')
}
}]
const router = createRouter({
routes
})
export default router
2.5 $route.params 参数对象
方法一： 在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问到动态匹配的参数值
方法二： 使用 props 接收路由参数，为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参（更推荐）
在匹配动态路由的时候，开启 props：true 传参
import { createRouter } from 'vue-router'
// 创建路由的实例对象
const routes = [{
path: '/',
name: 'Layout',
component: () => import('@/views/Layout')，
children: [
{
path: '/category/:id',
name: 'TopCategory',
component: () => import('@/views/category/index')，
props：true
}
}]
const router = createRouter({
routes
})
export default router
通过 prpos 节点使用
vue-router 的编程式导航 API
3.1 $router.push
调用 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面
3.2 $router.replace
调用 this.$router.replace() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面
push 和 replace 的区别：
push 会增加一条历史记录
replace 不会增加历史记录，而是替换掉当前的历史记录
3.3 $router.go
调用 this.$router.go() 方法，可以在浏览历史中前进和后退
简化用法：
router.forward() 在历史记录中，前进到下一个页面
作者：ZHOUQYI
链接：https://juejin.cn/post/7095379283169771557
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
