木灵鱼儿

木灵鱼儿

阅读:1121

最后更新:2022/01/14/ 20:44:04

vue router 一个重定向页面的思路

当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。

此时可能会有两种情况:

  1. 跳转的链接就是b网站的具体链接地址。
  2. 跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。

两种做法都各有优势:

  • 第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。
  • 第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。

那么,在vue中,做一个重定向页面,怎么做?

思路

思路1

利用路由守卫,当链接上存在某个参数的时候,在守卫里进行判断,并通过next进行跳转。

这种的话不一定需要某个路由页面做跳板,但是需要一个触发的参数,这个参数有可能会和以后的页面参数重叠,如果项目不大的话,可以考虑这个。

思路2

这个是最近想出来的思路,我们需要利用一个路由页面做跳板,然后利用路由的redirect配置项来进行处理。

const routes = [{ path: '/home', redirect: '/' }]

这是一个常见的重定向用法,事实上,这个redirect除了路径string参数,还支持对象和函数,其中对象就是我们进行跳转时,传入的那个对象。

const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

然而对象也不是我需要的,我们需要函数。

const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // 方法接收目标路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

当我们使用函数的时候,可以接受到一个参数to表示当前的路由对象,那么我们return出的对象,则是重定向的具体路由地址。

既然能用函数,我们能操作的方式就很多了。

具体实施

路由代码:

import redirectFunction from "./redirectRouter.js";
const routes = [
  {
    path: '/redirect',
    name:"Redirect",
    redirect: redirectFunction,
  },
]

重定向函数redirectRouter.js

export default (to) => {
  ...一些具体操作
  return {name:"xxx",params:{},query:{}};
}

这样的话,我们将具体的路由重定向方法抽象出来,方法被独立出来后,我们就可以写更多的复杂的逻辑判断,并且不会影响路由配置的可读性,而且替换redirectFunction函数也方便。

重点是我们省去了在路由守卫里增加过多的逻辑判断。

但是需要主要,这个方法必须是同步方法,异步promise是不行的。

异步思路

如果项目有一个div#app未初始化就显示的一个loading动画,那么可以使用路由独享的路由守卫

//vue3 的路由示例
const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

如果没有div#app未初始化就显示的一个loading动画,可以给重定向Redirect页面增加一个动画或者什么图啥的,然后再路由里面的生命钩子里运行重定向方法,也是可以的。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 3
文章被阅读 1121

相关文章