chunyu_project/media/learn/courses/15/chapters/65.md

Vue Router 路由

学习目标

• 掌握路由配置
• 学会路由导航
• 理解路由守卫

路由配置

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

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: () => import('./Home.vue') },
        { path: '/about', component: () => import('./About.vue') },
        { path: '/user/:id', component: () => import('./User.vue') }
    ]
})

编程式导航

import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/about')
router.push({ name: 'user', params: { id: '123' } })

路由守卫

router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth && !isLoggedIn()) {
        next('/login')
    } else {
        next()
    }
})

动手练习

1. 配置嵌套路由
2. 实现面包屑导航
3. 添加登录守卫