vue-router使用

路由：目的就是将组件映射到路由上，路由知道哪里渲染组件，更方便创建单页面引用
一、vue3.x及更低版本
二、vue4.x（适用于vue3项目中）
（1）安装路由包
（2）在单独的文件中配置路由方便管理及引入全局使用

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
const router = createRouter({history: createWebHashHistory(),routes: staticRoutes,
});export const staticRoutes: Array<any> = [{path: '/login',name: 'login',component: () => import('@/views/login/index.vue'),meta: {title: i18n.global.t('message.staticRoutes.signIn'),},},{path: '/404',name: 'notFound',component: () => import('@/views/error/404.vue'),meta: {title: i18n.global.t('message.staticRoutes.notFound'),},},
];
// 可以设置全局导航守卫等，并将配置的路由导出
export default router;

（3）引入全局使用（一般在main.js中，在根组件引入）

import router from './router';
import App from './App.vue';
const app = createApp(App);
app.use(router)

知识点梳理
1、基础知识点
（1）router-link （链接路由 类似a标签）
（2）router-view（路由出口，渲染当前url匹配的组件会在router-view处渲染）
（3）使用
全局注册的路由可通过this.$router和this.$route
在实例中使用4.x中需要手动引入并使用

import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
// 添加路由项
router.push({ path: , query:  });
router.push({ name: , params:  });
// 拿当前路由（url信息）
route.path、route.query(url存在参数)、route.params、route.hash等

（4）动态路由匹配（使用：进行匹配）：场景：有时我们对同一个组件User会对所有用户进行渲染，但是用户id不同。当动态路由被匹配时，它的动态路由参数会在this.$route.params上
针对这种动态路由匹配相同的组件时，为了提高性能，组件不会销毁再创建，导致组件的生命周期不会调用。
办法：在组件上监听动态参数处理逻辑 $route.params 或者利用组件导航守卫beforeRouteUpdate在组件上等更新前做逻辑

{ path: '/users/:id', component: User },

（5）匹配所有路由或404not found路由

const routes = [// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },// 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下{ path: '/user-:afterUser(.*)', component: UserGeneric },
]this.$router.push({name: 'NotFound',// 保留当前路径并删除第一个字符，以避免目标 URL 以 `//` 开头。params: { pathMatch: this.$route.path.substring(1).split('/') },// 保留现有的查询和 hash 值，如果有的话query: this.$route.query,hash: this.$route.hash,
})

（6）路由path不区分大小写，且后面可加/,但是可通过路由语法进行设置
（7）嵌套路由
（8）编程式导航

2、
3、

路由的history及hash原理讲解