vue-router 的重定向-redirect

简介: vue-router 的重定向-redirect

开发中有时候我们虽然设置的路径不一致,但是我们希望跳转到同一个页面,或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。


redirect基本重定向


我们只要在路由配置文件中(/src/router/index.js)把原来的component换成redirect参数就可以了。我们来看一个简单的配置。

export default new Router({
  routes: [
    {
      path: '/',
      component: Hello
    },{
      path: '/params/:newsId(\\d+)/:newsTitle',
      component: Params
    },{
      path: '/goback',
      redirect: '/'
    }
  ]
})


这里我们设置了goback路由,但是它并没有配置任何component(组件),而是直接redirectpath:'/'下了,这就是一个简单的重新定向。


重定向时传递参数


我们已经学会了通过url来传递参数,那我们重定向时如果也需要传递参数怎么办?其实vue也已经为我们设置好了,我们只需要在redirect后边的参数里复制重定向路径的path参数就可以了。可能你看的有点晕,我们来看一段代码:

{
  path:'/params/:newsId(\\d+)/:newsTitle',
  component:Params
},{
  path:'/goParams/:newsId(\\d+)/:newsTitle',
  redirect:'/params/:newsId(\\d+)/:newsTitle'
}


已经有了一个params路由配置,我们再设置一个goParams的路由重定向,并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数接收方法和正常的路由接收方法一样。

目录
相关文章
|
6月前
|
JavaScript
vue的重定向解决方法
vue的重定向解决方法
98 1
|
2月前
|
JavaScript
Vue3基础(20)___Vue3配置错误路由重定向写法
本文介绍了Vue 3中配置错误路由重定向的正确写法,包括使用参数和自定义正则表达式来定义通配符路由。
49 0
Vue3基础(20)___Vue3配置错误路由重定向写法
|
3月前
|
JavaScript
Vue中、参数传递以及重定向
该博客文章介绍了在Vue.js中如何通过路由进行参数传递,并展示了如何在页面间传递参数、在路由配置中设置参数以及在组件中获取这些参数的方法,同时还解释了如何在Vue中实现页面重定向,包括使用`beforeEach`守卫进行全局重定向和页面间的返回操作。
|
5月前
|
JavaScript
|
5月前
|
JavaScript
vue路由从入门到进阶 --- 路由重定向与404等问题
vue路由从入门到进阶 --- 路由重定向与404等问题
|
6月前
|
JSON JavaScript 前端开发
IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向
IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向
228 0
|
6月前
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
92 0
|
6月前
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
61 0
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
118 0
下一篇
无影云桌面