vue-router重定向redirect和别名alias的用法区分

墨蓝 2023-07-03 04:39 15阅读 0赞

vue-router是vue框架的重要且常用的插件之一，用于单页面应用的路径打包管理。项目中常会用到redirect和alias以做“页面假动作”跳转。

## 重定向redirect ##

顾名思义，这个属性用于重定向页面跳转路径。简单说就是设置了一个路由，它有自己的路径，但重定向跳转至另一个路由。

export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'HelloWorld',
          component:HelloWorld 
        },
        { 
          path:'/gohome',
          redirect:'/'
        }
      ]
    })

<router-link to="/">Home</router-link>|
    <router-link to="/gohome">goHome</router-link>

如例子，“/gohome”的路由结果跳转至“/”根目录路由，最终结果就是两个路由显示的页面内容完全一致。**注意：包括浏览器地址栏的路由原路径也随之改变显示为重定向的路径！**

## 别名alias ##

其实就是为某个路由增加一个“花名”——新路径，使得不管应用到哪条路径最终都显示同一个路由的页面内容。举例：

export default new Router({ 
      routes: [
        { 
          path:'/hi1',
          component:hi1,
          alias:'/Jsxj'
        }
      ]
    })

<router-link to="/hi1">Hi1</router-link>|
    <router-link to="/Jsxj">Jsxj</router-link>

如上，指向别名alias路径的’router-link’会跳转至path路径的路由页面，最终两个路径都会显示相同的页面内容。**但区别于重定向的一点是，浏览器地址栏会保留alias的路径不会随之变动！** 这可能是客户往往更想看到的东西。

另外，重定向带参数的目标路由时，该路由的路径中参数名应与目标路由路径参数名一致，才可以向目标路由传递对应参数值。

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关路由重定向和别名

路由重定向和别名；路由重定向；路由别名

蔚落/ 2024年04月20日 12:08/ 0 赞/ 180 阅读

相关转发(Forward)和重定向(Redirect)的区别

*转发是服务器行为，重定向是客户端行为。** **转发（Forward）** 通过RequestDispatcher对象的forward（HttpServletRequ...

痛定思痛。/ 2024年04月17日 21:03/ 0 赞/ 157 阅读

相关【重定向302】Redirect

介绍 URL 重定向，也称为 URL 转发，是一种当实际资源，如单个页面、表单或者整个 Web 应用被迁移到新的 URL 下的时候，保持（原有）链接可用的技术。HTTP

红太狼/ 2023年10月01日 20:25/ 0 赞/ 85 阅读

相关 vue-router重定向redirect和别名alias的用法区分

vue-router是vue框架的重要且常用的插件之一，用于单页面应用的路径打包管理。项目中常会用到redirect和alias以做“页面假动作”跳转。重定向redire

墨蓝/ 2023年07月03日 04:39/ 0 赞/ 16 阅读

相关 redirect重定向

redirect 不仅能重定向到本项目的接口中， return "redirect:/index"; 也能重定向到外面指定接口(url) return "redi

﹏ヽ暗。殇╰゛Y/ 2023年06月19日 05:26/ 0 赞/ 84 阅读

相关请求转发（Forward）和重定向（Redirect）

1、重定向（Redirect）是服务端根据逻辑,发送一个状态码,告诉浏览器重新去请求那个地址.所以地址栏显示的是新的URL 1、工作原理：

亦凉/ 2022年12月01日 11:42/ 0 赞/ 324 阅读

相关 forward(转发)和redirect（重定向）的区别

forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器.浏览器根本不知道服务器发送的内容从哪里来的,所以它的

傷城~/ 2022年07月13日 00:53/ 0 赞/ 335 阅读

相关 vue中的重定向和别名

重定向：重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，重定向也是通过 routes 配置来完成，下面例子是从 "\" 重定向

﹏ヽ暗。殇╰゛Y/ 2022年05月18日 23:22/ 0 赞/ 319 阅读

相关 Java-重定向(redirect)

JavaEE-重定向(redirect) 在Java代码里： response.sendRedirect("test.jsp"); 原理：重定向是一个客户

雨点打透心脏的1/2处/ 2021年09月29日 02:28/ 0 赞/ 432 阅读

相关转发forword和重定向redirect

转发forword ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

柔光的暖阳◎/ 2021年09月25日 03:28/ 0 赞/ 515 阅读