Vue路由知识点总结

路由

用 Vue.js + Vue Router 创建单页应用，感觉很自然：使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

起步

我们来看一下脚手架的给我们大家的路由实例：

//导入创建路由对象方法和hash 模式路径方法
import { createRouter, createWebHashHistory } from 'vue-router
//创建路由表
const routes = [
{
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
},
{
    path: '/about/:id',
    name: 'About',
    component: () => import('../views/About.vue')
},
]
//创建路由对象
const router = createRouter({
  history: createWebHashHistory(),//hash模式路径
  routes//路由表
})
//导出路由对象
export default router

如何使用路由

//to属性指定路由路径
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
//router-view为路由视图
<router-view/>

动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

//路由表
{
    path: '/about/:id/:name',
    name: 'About',
    component: () => import('../views/About.vue'),
 }
//App.vue
<router-link to="/about/1">About</router-link>

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

//About.vue
{
  {$route.params.id}}

响应路由参数的变化

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

//Home.vue
watch:{
    $route(to, from) {
      console.log(to)
      console.log(from)
    }
 }

匹配所有路径

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)：

{     
// 匹配所有路径  vue2使用*   vue3使用/:pathMatch(.*)    
path:"*",//vue2
path: "/:pathMatch(.*)", 
path: '/stu:pathMatch(.*)',//可以以什么开头    
name: "404",     
component: () => import('../views/404.vue')  
}

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：

//404.vue
{
  {$route.params.pathMatch}}

匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。

嵌套路由

在项目中，我们的路由可能会更加复杂，例如About路由中还需要嵌套子路由，分别显示demo01/demo02/demo03三个子模块，我们就需要为About路由添加children属性，并创建About模块的路由视图：

children:[
      {path:'demo01',c