用vue2 写一个动态路由
时间: 2024-03-13 16:37:41 浏览: 20
首先,在 Vue 中定义动态路由需要使用动态路径参数。例如,我们可以定义一个动态的用户 ID 路径参数,如下所示:
```javascript
{
path: '/user/:id',
name: 'user',
component: User
}
```
在这个路由中,我们使用了 `:id` 动态路径参数来匹配任意用户 ID。当用户访问 `/user/123` 时,路由会将 `123` 作为参数传递给组件。
接下来,我们可以在组件中通过 `$route.params` 来访问动态路由参数。例如,在 `User` 组件中,我们可以使用以下代码访问动态路径参数:
```javascript
export default {
name: 'User',
created() {
console.log(this.$route.params.id)
}
}
```
这样,当用户访问 `/user/123` 时,控制台将输出 `123`。
最后,我们可以通过 Vue Router 的 `router.push()` 方法来动态跳转到一个带有动态路径参数的路由。例如,我们可以使用以下代码来跳转到用户 ID 为 `123` 的用户页面:
```javascript
this.$router.push({ path: '/user/123' })
```
当然,我们也可以在跳转时通过 `params` 属性传递动态路径参数:
```javascript
this.$router.push({ name: 'user', params: { id: 123 }})
```
这样,我们就完成了一个简单的动态路由示例。完整代码如下:
```javascript
const routes = [
{
path: '/user/:id',
name: 'user',
component: User
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
```