50 lines
935 B
Markdown
50 lines
935 B
Markdown
# Vue Router 路由
|
|
|
|
## 学习目标
|
|
- 掌握路由配置
|
|
- 学会路由导航
|
|
- 理解路由守卫
|
|
|
|
## 路由配置
|
|
|
|
```typescript
|
|
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') }
|
|
]
|
|
})
|
|
```
|
|
|
|
## 编程式导航
|
|
|
|
```typescript
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
router.push('/about')
|
|
router.push({ name: 'user', params: { id: '123' } })
|
|
```
|
|
|
|
## 路由守卫
|
|
|
|
```typescript
|
|
router.beforeEach((to, from, next) => {
|
|
if (to.meta.requiresAuth && !isLoggedIn()) {
|
|
next('/login')
|
|
} else {
|
|
next()
|
|
}
|
|
})
|
|
```
|
|
|
|
## 动手练习
|
|
|
|
1. 配置嵌套路由
|
|
2. 实现面包屑导航
|
|
4. 添加登录守卫
|