如何处理vue router 路由传参刷新页面参数丢失

概述

常见场景：点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据。

路由传参一般有如下几种方式，下面主要介编程式导航 router.push 的传参方式：

方法一：通过 params 传参

路由配置如下：

{
    path: '/detail/:id',  //若id后面加?代表这个参数是可选的
    name: 'detail',
    component: Detail
}

通过 $router.push 中 path 携带参数的方式

// 列表中的传参
goDetail(row) {
    this.$router.push({
        path: `/detail/${row.id}`
    })
}

// 详情页获取参数
this.$route.params.id

通过 $router.push 的 params 传参

// 列表页传参
goDetail(row) {
    this.$router.push({
        name: 'detail',
        params: {
            id: row.id
        }
    })
}

// 详情页获取
this.$route.params.id

注：这种方式的传参，路径用 name，路径用 name，路径用 name , 用 path 会获取不到；如果在路由配置中没有添加 /:id即 path: 'detail'，url 中不会显示 id，在详情页还是可以拿到参数 id，但刷新后参数丢失。

以上这两种方式，传递的参数 id 会在 url 后面显示，如图：

传递的参数会暴露在网址中。

如果在路由中设置了params参数 /:id，但是在跳转的时候没有传递参数，会导致页面没有内容或跳转失败，可在后面加 ？代表这个参数是可选的，即 /:id?

方法二：通过 query 传参

// 路由配置
{
    path: '/detail',
    name: 'detail',
    component: Detail
}

// 列表页
goDetail(row) {
    this.$router.push({
        path: '/detail',
        query: {
            id: row.id
        }
    })
}

// 详情页
this.$route.query.id

注：这种方式传递的参数会在地址栏的 url 后面显示 ?id=?，类似于 get 传参；query 必须配合 path 来传参。

传递的参数是对象或数组

还有一种情况就是，如果通过 query 的方式传递对象或数组，在地址栏中会被强制转换成 [object Object]，刷新后也获取不到对象值。

此时可以通过 JSON.stringify() 方法将要传递的参数转换为字符串传递，在详情页再通过 JSON.parse() 转换成对象。

let parObj = JSON.stringify(obj)
this.$router.push({
    path: '/detail',
    query: {
        'obj': parObj
    }
})

// 详情页
JSON.parse(this.$route.query.obj)

这个方法虽然可以传递对象，若数据少还好，数据多的话地址栏就很长了

注意：在所有的子组件中获取路由参数是 $route不是 $router

以上 params 和 query 传参方式对比：

  • 通过 $router.push 的 params + name 传参，若路由中没有设置params参数，参数不会拼接在路由后面，但是页面刷新参数会丢失。
  • 通过 $router.push 中 path 携带参数或通过 query 传参，参数会拼接在地址后面，会暴露信息。

方法三：使用 props 配合组件路由解耦

// 路由配置
{
    path: '/detail/:id',
    name: 'detail',
    component: Detail,
    props: true // 如果props设置为true，$route.params将被设置为组件属性
}

// 列表页
goDetail(row) {
    this.$router.push({
        path: '/detail',
        query: {
            id: row.id
        }
    })
}

// 详情页
export default {
    props: {
        // 将路由中传递的参数id解耦到组件的props属性上
        id: String
    },
    mounted: {
        console.log(this.id)
    }
}

此外，还可以通过把参数存在 sessionStorage 或 localStorage 中来解决页面刷新参数丢失的问题，具体结合实际项目即可。

以上就是如何处理vue router 路由传参刷新页面参数丢失的详细内容，更多关于vue的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue3.0+vue-router+element-plus初实践

    vue3.0+vue-router+element-plus初实践

    Vue3中文文档 Vue3.0对比Vue2.x优势 框架内部做了大量的性能优化,包括:虚拟dom,编译模板,Proxy的新数据监听,更小的打包文件等. 新增的组合式API(即Composition API),更适合大型项目的编写方式. 对TypeScript支持更好,去掉this操作,更强大的类型推导. 初始化项目 安装@vue/cli npm install @vue/cli -g 或 yarn global add @vue/cli 创建项目 vue create 项目名 可以选择Vue3的

  • Vue router安装及使用方法解析

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ps

  • Vue router传递参数并解决刷新页面参数丢失问题

    Vue Router 传参方式: 1. this.$router.push({ name: '模块名称', params: { // 各参数 } }) router.js: export default new Router({ routes: [ { path: '/paramsPassingByRouter', component: ParamsPassingByRouter, children: [ { path: 'paramsMode', name: 'paramsMode', com

  • Vue-router编程式导航的两种实现代码

    页面导航的两种方式 声明式导航:通过点击链接实现导航的方式,叫做声明式导航 例如:普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link> 编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航 例如:普通网页中的 location.href 编程式导航基本用法 常用的编程式导航 API 如下: this.$router.push('hash地址') this.$router.g

  • Vue-router路由该如何使用

    一.说明 Vue Router是Vue.js官方的路由管理器.它和Vue.js的核心深度集成, 让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于Vue js过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的CSS class的链接 HTML5 历史模式或hash模式, 在IE 9中自动降级 自定义的滚动行为 二.安装 基于第一个vue-cli进行测试学习: 先查看node modules中是否存在vue-route

  • vue-router定义元信息meta操作

    vue-router定义元信息meta操作

    router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue' import TestChild from '../views/TestChild.vue' import AVie

  • vue-router路由懒加载及实现的3种方式

    什么是路由懒加载? 也叫延迟加载,即在需要的时候进行加载,随用随载. 官方解释: 1:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 2:如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 官方在说什么呢?为什么需要懒加载? 1:首先,我们知道路由中通常会定义很多不同的页面. 2:这个页面这项目build打包后,一般情况下,会放在一个单独的js文件中 3:但是,如果很多的页面都放在同一个js文件中,必然会造成这个页面

  • vue-router懒加载的3种方式汇总

    未使用懒加载 import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@components/HelloWorld'; Vue.use(Router); export default new Router({ routes:[ {path:'./', name:'HelloWorld', component:HelloWorld } ] }) vue异步组件 component:resolve

  • Vue-router中hash模式与history模式的区别详解

    Vue-router中hash模式与history模式的区别详解

    VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,这个题其实就是考验你的开发经验是否属实. 小白回答:hash模式url带#号,history模式不带#号. 大牛解答: 形式上:hash模式url里面永远带着#号,开发当中默认使用这个模式.如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传: 功能上:比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个

  • 如何处理vue router 路由传参刷新页面参数丢失

    如何处理vue router 路由传参刷新页面参数丢失

    概述 常见场景:点击列表的详情,跳转到详情内页,在内页根据传递的参数获取详情数据. 路由传参一般有如下几种方式,下面主要介编程式导航 router.push 的传参方式: 方法一:通过 params 传参 路由配置如下: { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { thi

  • vue中路由传参以及跨组件传参详解

    路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> 路由

  • vue2 router 动态传参,多个参数的实例

    这个是用vue-cli生成的项目下使用 比如有个路由跳转时需要带两个参数: <router-link to='/tr'>查看</router-link> 可以这样写: <router-link to='/tr/uid/pid'>查看</router-link> 然后去router.js 中 处理这个路由: import Vue from 'vue' import Router from 'vue-router' import tr from '@/compo

  • vue设置路由title,但刷新页面时title失效的解决

    目录 1. 在router/index.js中 2.在main.js中设置路由守卫 具体操作如下 同上在 router/index.js 中 在项目的根目录下 在main.js中引入并且使用该插件 修改App.vue的路由标签 1. 在router/index.js中 使用meta属性的title设置好每个路由对应的title值 /* router/index.js: */   routes: [     {       path: '/',       component: () => imp

  • vue路由传参方式的方式总结及获取参数详解

    目录 一.声明式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 二.编程式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 三.获取参数 1.params的获取方式 2.query的获取方式 四.需要注意的点 总结 一.声明式传参 1.params传参(显示参数) 在url中会显示出传参的值,刷新页面不会失去拿到的参数,使用该方式传值的时候,需要子路由提前配置好参数: //路由参数配置 const

  • React组件通信之路由传参(react-router-dom)

    React组件通信之路由传参(react-router-dom)

    目录 最近在学习react,现在的工作中使用的是vue,在学习的过程中对两者进行比较,加深理解. 以下是react中的一小部分知识点,我个人觉得也是比较常用的知识点,react组件通信的其中一种方式--路由传参(react组件通信的方式有多种,如props.事件回调.context.router.redux.缓存等等).现在单页面SPA应用的比较广泛,在不刷新整个页面进行部分页面的跳转,使用路由跳转便在所难免,那么react路由除了进行页面之间的跳转,还有很大一个作用就是进行页面或者组件切换时传

  • 浅谈vue-router 路由传参的方法

    路由传参数.在很多时候我们需要路由上面传递参数,比如新闻列表页,我们需要传递新闻ID,给新闻详细页. 1.新闻列表页模板 <template id="news"> <div> <h2>新闻列表</h2> <ul> <li> <router-link to="/news/001">新闻001</router-link> </li> <li> <

  • vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

  • Vue路由传参页面刷新后参数丢失原因和解决办法

    目录 vue路由传参方法 原因分析: 解决方案: 总结 vue路由传参方法 在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({ path: "/test", query: { a: 1, b: 2 } }) 这样我们就传递了两个参数,在 /test  页面 就可以接收这两个参数 let a = this.$route.query.a; let b = this.$route.query.b; 可以看到浏览器进行了url参数

随机推荐