关于路由重定向redirect的基本使用
作者：木蓝茶陌*_*
这篇文章主要介绍了关于路由重定向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，这个过程是别名的过程
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。