Configure dynamic routing in vue3
时间: 2023-02-08 11:19:51 浏览: 50
在 Vue 3 中配置动态路由的方法如下:
1. 安装 Vue Router 插件:
```bash
npm install vue-router
```
2. 在你的 Vue 根实例中引入 Vue Router 并注册:
```js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
// 配置路由
})
export default router
```
3. 在你的 Vue 根实例中注册路由:
```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
4. 在你的 Vue 组件中使用 `<router-view>` 标签来渲染路由组件:
```html
<template>
<div>
<router-view />
</div>
</template>
```
5. 在路由配置中定义动态路由。例如,如果你想让 `/user/:id` 这样的 URL 显示一个用户详情页面,你可以这样定义路由:
```js
const router = new Router({
routes: [
{
path: '/user/:id',
component: UserDetail
}
]
})
```
在这种情况下,`:id` 就是一个动态路由参数,它的值会被提取出来并传递给组件的 `props`。例如,如果你访问的是 `/user/123`,那么组件的 `props` 将会包含一个 `id` 属性,值为 `123`。
你可以在组件内使用 `this.$route.params` 来访问动态路由参数。例如:
```js
export default {
name: 'UserDetail',