「豆包的精彩生活」-同时支持query和state的路由跳转方法

一个出色的个人网站

「豆包的精彩生活」

辽ICP备13014013号

已收集 268 张精美图片

today 今日图片

有鳍且惊艳

阿里夫达鲁环礁海岸的鲸鲨, 马尔代夫 (© Bachir Moukarzel/Amazing Aerial Agency)

www.doubao.life

一个出色的个人网站

数据概览

文章

分类

标签

活动出行 8

豆包出行活动或摄影活动

活动出行

豆包说说 7

吐槽与宣泄合体是王道

豆包说说

博客博文 3

博客文章和其他文章与转载解读等等

博客博文

macOS 3

Apple MacOS

macOS

JavaScript 1

一种动态的编程语言

JavaScript

渐进式前端框架

VUE

CSS 2

一种用来表现HTML或XML等文件样式的计算机语言

CSS

react

空栏目

react

空栏目

音乐作品

空栏目

音乐作品

空栏目

同时支持query和state的路由跳转方法

2025-01-04

文章正文

vue的路由跳转带参数很简单，不过有的时候由于业务需求，需要传对象或很长的数据。
那query就无法满足需求了。
再或者一味的使用state来传递数据又对搜索引擎爬虫不友好。
这个方法同时使用以上两种方式来传递数据，收藏、备查。

common/index.js

import router from '../router'
import { useRoute } from 'vue-router'
import { toRefs } from 'vue'

const go = (name, data = {}, query = {}) => {
    //入参：路由名，state数据，query数据
    router.push({ name: name, state: data, query: query })
}

const getRouter = () => {
    //出参：路由名，state数据，query数据
    const route = useRoute()
    let r = toRefs(route)
    return { name: r.name.value, state: history.state, query: r.query.value }
}

发表