路由重定向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,这个过程是别名的过程
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。