给我一个dome
时间: 2024-01-20 10:02:05 浏览: 23
以下是一个简单的 Vue 动态路由的示例:
假设我们有一个用户列表,我们希望用户能够点击列表中的某个用户,然后跳转到该用户的详细信息页面。我们可以使用 Vue 动态路由来实现这个功能。
首先,我们需要定义路由:
```
const routes = [
{
path: '/users',
name: 'Users',
component: Users
},
{
path: '/users/:id',
name: 'UserDetail',
component: UserDetail,
props: true
}
]
```
在上面的代码中,我们定义了两个路由,一个是用户列表页面的路由,另一个是用户详情页面的路由。注意,我们在第二个路由中使用了动态路由参数 `:id`。
然后,我们需要创建两个组件,一个是用户列表组件,另一个是用户详情组件:
```
<template>
<div>
<h2>Users</h2>
<ul>
<li v-for="user in users" :key="user.id">
<router-link :to="{ name: 'UserDetail', params: { id: user.id } }">{{ user.name }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
users: [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
}
}
}
</script>
```
```
<template>
<div>
<h2>User Detail</h2>
<p>User ID: {{ $route.params.id }}</p>
</div>
</template>
```
在上面的代码中,我们在用户列表组件中使用了 `router-link` 组件来跳转到用户详情页面,并传递了用户的 ID 作为路由参数。
最后,我们需要在 Vue 根实例中注册路由:
```
import Vue from 'vue'
import VueRouter from 'vue-router'
import Users from './components/Users.vue'
import UserDetail from './components/UserDetail.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/users',
name: 'Users',
component: Users
},
{
path: '/users/:id',
name: 'UserDetail',
component: UserDetail,
props: true
}
]
const router = new VueRouter({
routes
})
new Vue({
router
}).$mount('#app')
```
现在,我们就可以在浏览器中访问我们的应用,并且可以点击用户列表中的某个用户,然后跳转到该用户的详细信息页面。在用户详情页面中,我们可以使用 `$route.params.id` 来获取路由参数,并展示用户的 ID。
希望这个示例能够对你有所帮助!