Vue-router 是基于路由和组件的，路由用于设定访问路径, 将路径和组件映射起来。在 vue-router 的单页面应用中, 页面的路径的改变就是组件的切换。

使用 vue-router 的步骤:

js
import {
    createRouter,
    createWebHashHistory,
    createWebHistory,
} from 'vue-router'

import Home from '../Views/Home.vue'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [{
            path: '/posts//',
            // redirect重定向
            redirect: '/home',
        },
        {
            name: 'home',
            path: '/posts//home',
            component: Home,
        },
        {
            // name路由记录独一无二的名称
            name: 'about',
            path: '/posts//about',
            // 路由懒加载
            component: () => import('../Views/About.vue'),
        },
    ],
})

export default router
js
import router from './router'

createApp(App).use(router).mount('#app')
js
< router - link to = "/home" > 首页 < /router-link>

    <
    router - view > < /router-view>

router-link 事实上有很多属性可以配置：

text
to属性：是一个字符串，或者是一个对象
replace属性：设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()；
active-class属性：设置激活a元素后应用的class，默认是router-link-active；
exact-active-class属性：链接精准激活时，应用于渲染的 <a> 的 class，默认是router-link-exact-active；

动态路由基本匹配

当需要将给定匹配模式的路由映射到同一个组件时，在路径中使用一个动态字段来实现，称之为路径参数。

NotFound

可编写一个动态路由用于匹配所有的 NotFound 的错误页面。

路由的嵌套

嵌套路由在子组件内部的路由进行切换。

动态添加路由

addRoute 可以动态添加路由。

路由导航守卫

Vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航，全局的前置守卫 beforeEach 是在导航触发时会被回调的。