使得一个路由地址A与另一个路由地址B联系起来,执行A的时候会跳转执行B。
关键字:redirect。
用户第一次访问网站页面("/根目录"首页)时,地址栏里边没有“#锚点”的信息,也就没有对应的组件用于显示,用户体验不好,现在可以通过重定向实现一种效果,即当浏览器没有任何 #锚点信息时,默认也给显示一个组件。
语法:
var router = new VueRouter({ routes:[ // {path:'/', redirect:'跳转到的路由地址'} {path:'/', redirect:'/home'}, {path:'/home', component:Home} ] })
执行/
根目录路由地址时,就跳转执行/home
路由地址 ,进而把对应的组件给显示出来。
注意:
在没有任何#锚点信息的时候,显示首页组件。
const router = new VueRouter({ routes:[ // {path:'路由地址A', redirect:'路由地址B'} // A 重定向执行 B {path:'/', redirect:'/home'}, {path:'/home', component:Home}, ] })
当用户访问某个连接时,需要让用户自动重新访问另一个连接,这样的一种需求的实现,称为路由重定向
如:
代码实现:
const routes = [ { path: "/", // 匹配用户访问的请求 redirect: "/main" // 将用户的请求重新定向到另一个请求 }, { path: "/main", // 最终用户访问的地址 copmonent: Layout } ]
当用户发送了一个请求,服务器正在升级,这个请求不对应任何组件,但是为了不影响用户体验,服务器自动将这个请求转发到展示首页的组件中
如:
代码展示:
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,这个过程是别名的过程
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。