亲宝软件园·资讯

展开

路由重定向redirect的使用

木蓝茶陌*_* 人气:0

路由重定向redirect

重定向

使得一个路由地址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},
  ]
})

vue路由重定向+路由别名

路由重定向

当用户访问某个连接时,需要让用户自动重新访问另一个连接,这样的一种需求的实现,称为路由重定向

如:         

代码实现:

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,这个过程是别名的过程

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

加载全部内容

相关教程
猜你喜欢
用户评论