关于路由重定向redirect的基本使用

更新时间：2022年08月16日 10:35:02 作者：木蓝茶陌*_*

这篇文章主要介绍了关于路由重定向redirect的基本使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

路由重定向redirect

重定向

使得一个路由地址A与另一个路由地址B联系起来，执行A的时候会跳转执行B。

关键字：redirect。

用户第一次访问网站页面("/根目录"首页)时，地址栏里边没有“#锚点”的信息，也就没有对应的组件用于显示，用户体验不好，现在可以通过重定向实现一种效果，即当浏览器没有任何 #锚点信息时，默认也给显示一个组件。

语法：

var router = new VueRouter({
  routes:[
    // {path:'/', redirect:'跳转到的路由地址'}
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home}
  ]
})

执行/根目录路由地址时，就跳转执行/home路由地址，进而把对应的组件给显示出来。

注意：

1.不仅 “/” 可以被重定向，其他普通路由地址互相也可以重定向。
2.重定向会使得路由再次发生调用请求。

案例

在没有任何#锚点信息的时候，显示首页组件。

const router = new VueRouter({
  routes:[
    // {path:'路由地址A', redirect:'路由地址B'}  // A 重定向执行 B
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home},
  ]
})

vue路由重定向+路由别名

路由重定向

当用户访问某个连接时，需要让用户自动重新访问另一个连接，这样的一种需求的实现，称为路由重定向

如：

用户地址栏输入：http://localhost:8080/
最终地址栏显示：http://localhost:8080/#/main
最终浏览器渲染：/main对应的组件

代码实现：

const routes = [
    {
        path: "/",            // 匹配用户访问的请求
        redirect: "/main"        // 将用户的请求重新定向到另一个请求
    },
    {
        path: "/main",        // 最终用户访问的地址
        copmonent: Layout
    }
]

路由别名（了解）

当用户发送了一个请求，服务器正在升级，这个请求不对应任何组件，但是为了不影响用户体验，服务器自动将这个请求转发到展示首页的组件中

如：

用户浏览器地址输入：http://localhost:8080/main
最终浏览器地址显示：http://localhost:8080/main
最终浏览器渲染的组件：/main2对应的组件

代码展示：

const routes = [
    {path: "/", redirect: "/login"}, // 当用户访问 /时，自动重定向到/login，避免用户看到空白页面
    {path: "/login", component: Login},
    {path: "/reg", component: Register},
    {path: "/main2", component: Layout, alias: "/main"}, // 路由别名
    // {path: "/main2", component: Layout}
]

总结：

路由重定向：你输入了a，访问过程中浏览器地址自动变成了b，并且浏览器渲染展示了b组件

{path:/"a",redirect:"/b"},
 {path:"/b",component:ComponentB}

路由别名：你输入了a，然后访问到了b

{path:"/a",component:ComponentB,alias:"/a"}         //alias别名

文字描述：

用户通过路径A访问资源A，服务器让客户端重新定向访问路径B，并得到路径B的过程，此时客户端看到的访问路径是路径B，看到的资源就是资源B，这个过程就是重定向

用户通过路径A 访问资源，服务器内部将路径A转发到路径B，并且得到了资源B的过程，此时客户端看到的访问路径就是路径A，看到的资源是资源B，这个过程是别名的过程

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue动态添加行/删除行的完整代码示例
在开发中我们常常会碰到这种业务,有一些数据需要在前端进行删除,这篇文章主要给大家介绍了关于vue动态添加行/删除行的相关资料,需要的朋友可以参考下
2024-02-02
vue3+vite+ts使用require.context问题
这篇文章主要介绍了vue3+vite+ts使用require.context问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Vue组件上使用v-model之单选框
这篇文章主要介绍了Vue组件上使用v-model之单选框,代码分为子组件内容和父组件内容，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
elementui的table列超出隐藏tooltip悬浮显示问题
这篇文章主要介绍了elementui的table列超出隐藏tooltip悬浮显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vscode中vue代码提示与补全没反应解决(vetur问题)
这篇文章主要给大家介绍了关于vscode中vue代码提示与补全没反应解决(vetur问题)的相关资料,文中通过图文将解决的方法介绍的非常详细,需要的朋友可以参考下
2023-03-03
vue+ElementUi+iframe实现轮播不同的网站
需要实现一个轮播图,轮播内容是不同的网站,并实现鼠标滑动时停止轮播,当鼠标10秒内不动时继续轮播,所以本文给大家介绍了用vue+ElementUi+iframe实现轮播不同的网站,需要的朋友可以参考下
2024-02-02
vue 使用vant插件做tabs切换和无限加载功能的实现
这篇文章主要介绍了vue 使用vant插件做tabs切换和无限加载功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue3+vite应用中添加sass预处理器问题
这篇文章主要介绍了vue3+vite应用中添加sass预处理器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
vue常用指令实现学生录入系统的实战
本文主要介绍了vue常用指令实现学生录入系统的实战，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
vue开发环境配置跨域的方法步骤
本文介绍了使用vue-cli搭建的项目在开发时配置跨域，上线后不做任何任何修改，接口也可以访问，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01