动态生成路由多个路由并跳转同一个模板页
时间: 2024-05-01 08:16:33 浏览: 18
可以通过 Vue Router 的动态路由配置实现动态生成多个路由,并跳转到同一个模板页。
首先,在路由配置文件中定义一个动态路由,用于接受参数:
```
{
path: '/dynamic/:id',
name: 'dynamic',
component: () => import('@/views/Dynamic.vue')
}
```
然后,在组件中通过 `$route.params.id` 获取动态路由中的参数,并根据参数显示不同的内容:
```
<template>
<div>
<h1>Dynamic Page {{ $route.params.id }}</h1>
<p v-if="$route.params.id === '1'">Content for Dynamic Page 1</p>
<p v-else-if="$route.params.id === '2'">Content for Dynamic Page 2</p>
<p v-else-if="$route.params.id === '3'">Content for Dynamic Page 3</p>
<p v-else>Invalid Page ID</p>
</div>
</template>
```
最后,在需要动态生成多个路由的地方,可以通过循环遍历生成多个路由:
```
<template>
<div>
<ul>
<li v-for="i in 3" :key="i">
<router-link :to="'/dynamic/' + i">Dynamic Page {{ i }}</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
```
这样就可以动态生成多个路由,并跳转到同一个模板页了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)