vue3路由（基本用法、路由守卫、动态路由）

在Vue 3中，使用Vue Router可以通过以下方式实现：

1. 安装Vue Router:

npm install vue-router@4

2. 创建路由实例并配置路由:

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
 
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
 
const router = createRouter({
  history: createWebHistory(),
  routes
})
 
export default router

3. 在Vue应用中使用路由:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
const app = createApp(App)
app.use(router)
app.mount('#app')

4. 路由守卫示例:

router.beforeEach((to, from, next) => {
  // 可以在这里进行身份验证、权限检查等
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next('/login') // 重定向到登录页面
  } else {
    next() // 继续
  }
})

5. 动态路由示例:

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
  beforeRouteEnter(to, from, next) {
    // 在路由进入之前执行某些操作
    next()
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，且该组件被复用时调用
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 在离开该路由时执行某些操作
    next()
  }
}
 
const routes = [
  // ...
  { path: '/user/:id', component: User }
]

以上代码提供了Vue 3中使用Vue Router的基础用法、路由守卫和动态路由的示例。