动态路由vue怎么写 vue3 动态路由

动态路由是指根据不同的参数或条件来动态生成路由，使得页面可以根据不同的参数或条件展示不同的内容。在Vue3中，我们可以使用路由器（router）来实现动态路由。

我们需要在Vue项目中安装并配置Vue Router。安装命令如下：

shell

npm install vue-router@next

然后，在项目的入口文件（一般是main.js）中引入并使用Vue Router：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: []
})
const app = createApp(App)
app.use(router)
app.mount('#app')

接下来，我们可以定义动态路由。在Vue Router中，可以使用动态路由参数来实现动态路由。动态路由参数使用冒号（:）来标识，参数的名称可以任意指定。例如，我们可以定义一个带有动态参数的路由：

const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true
  }
]

在上面的示例中，我们定义了一个名为`/user/:id`的路由，其中`:id`是一个动态参数，可以根据实际情况传入不同的值。当访问`/user/1`时，会匹配到这个路由，并渲染`User`组件。

在组件中，我们可以通过`$route.params`来获取动态路由参数的值。例如，在`User`组件中，我们可以获取到`id`参数的值：

export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}

除了动态参数，我们还可以使用其他条件来生成动态路由。例如，我们可以使用路由元信息（meta）来定义一些条件，并根据这些条件来生成动态路由。在定义路由时，可以使用`meta`字段来设置路由元信息。例如：

const routes = [
  {
    path: '/user/:id',
    component: User,
    meta: {
      requiresAuth: true
    }
  }
]

在上面的示例中，我们定义了一个带有`requiresAuth`元信息的路由。根据这个元信息，我们可以在路由导航守卫中进行条件判断，来动态生成路由。例如，我们可以在全局前置守卫中判断用户是否已登录：

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

在上面的示例中，如果访问的路由需要登录权限（即带有`requiresAuth`元信息），且用户未登录，则会跳转到登录页面。

总结一下，动态路由可以根据不同的参数或条件来生成路由，使得页面可以根据不同的参数或条件展示不同的内容。在Vue3中，我们可以使用Vue Router来实现动态路由。通过定义动态参数或使用路由元信息，我们可以实现根据不同的参数或条件生成动态路由，并在组件中获取动态参数的值或在导航守卫中进行条件判断。这样，我们可以根据不同的需求来动态生成路由，实现更灵活和可复用的页面逻辑。