木灵鱼儿

木灵鱼儿

阅读：2468

最后更新：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页面增加一个动画或者什么图啥的，然后再路由里面的生命钩子里运行重定向方法，也是可以的。

文章分类 vue 项目实战
文章标签 vuerouter重定向vue router
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 3获得阅读 2468

版权申明

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

one
two
three

关于作者

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

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目