路由重定向redirect的基本使用[亲测有效]

路由重定向redirect的基本使用[亲测有效]路由重定向redirect重定向:使得一个路由地址A与另一个路由地址B联系起来,执行A的时候会跳转执行B。关键字:redirect。用户第一次访问网站页面(“/根目录”首页)时,地址栏里边没有“#锚点”的信息,也就没有对应的组件用于显示,用户体验不好,现在可以通过重定向实现一种效果,即当浏览器没有任何#锚点信息时,默认也给显示一个组件。语法:varrouter=newVueRouter({routes:[//{path:’/’,redirect:’跳转到的路由地址

大家好,欢迎来到IT知识分享网。

路由重定向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},
  ]
})

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/25941.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信