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

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