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

目录 路由重定向redirect 重定向 案例 vue路由重定向+路由别名 路由重定向 路由别名（了解）

路由重定向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，这个过程是别名的过程

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

查看更多关于关于路由重定向redirect的基本使用的详细内容...