vue-router:重定向路由理解

清疚 2022-01-20 04:21 511阅读 0赞

# 资料 #

[转自][Link 1]  
[官网][Link 2]

# 为什么使用重定向路由 #

开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向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（组件），而是直接redirect到path:’/’下了，这就是一个简单的重新定向。

# 重定向时传递参数 #

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

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

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

[Link 1]: https://www.cnblogs.com/jinsuo/p/8287819.html
[Link 2]: https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html#%E9%87%8D%E5%AE%9A%E5%90%91