vue-router基础知识

安装

npm install vue-router
yarn add vue-router

案例

main.js

import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App'
import AppFather from './components/AppFather'

// 路由映射表
const routes = [
    {
        path: '/',
        component: AppFather
    },
    {
        path: '/appHeader',
        // 动态导入
        component: () => import('./components/AppHeader.vue') 
    }

]
const router = createRouter({
    history: createWebHashHistory(),
    routes // `routes: routes` 的缩写
})
const app = createApp(App);
app.use(router);
app.mount('#app');

App.vue

结果

动态路由

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：route讲解

setup语法糖中使用useRoute()获取route实例。其他的语法跟以前的没啥两样。
官方文档