vue中如何使http://localhost:8080/article/ffg路径自动跳转到http://localhost:8080/article
时间: 2023-10-04 08:05:18 浏览: 64
在Vue中可以通过`vue-router`来进行路由管理和跳转。在`vue-router`中,可以通过设置路由的重定向来实现将一个路径自动跳转到另一个路径。
假设你的路由定义如下:
```js
import Vue from 'vue'
import Router from 'vue-router'
import Article from '@/views/Article.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/article',
name: 'Article',
component: Article
},
{
path: '/article/:id',
name: 'ArticleDetail',
component: ArticleDetail
}
]
})
```
那么你可以在路由定义中添加一个重定向的规则,将`/article/:id`重定向到`/article`,即可实现将`http://localhost:8080/article/ffg`自动跳转到`http://localhost:8080/article`。
```js
export default new Router({
routes: [
{
path: '/article',
name: 'Article',
component: Article
},
{
path: '/article/:id',
name: 'ArticleDetail',
component: ArticleDetail
},
// 添加重定向规则
{
path: '/article/:id',
redirect: '/article'
}
]
})
```
注意,这里的重定向规则只能匹配到`/article/:id`这个路径,如果需要将其他类似的路径也自动跳转到`/article`,则需要添加多条重定向规则。
相关推荐
![](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)