场景:

pageA----pageB(pageB包含三个二级路由)

默认进入pageB时进入第一个页面的路由,之后点击左侧按钮,分别进入其他二级路由

原router.js写法:

//应用信息
    {
        path:'/app-manage',
        name:'app-manage',
        component:AppManage,
        redirect:'/app-manage/appMsg',
        children:[
            //应用信息
            {
                path:'/app-manage/appMsg',
                name:'appMsg',
                component:AppMsg,
            },
            ...其他子路由...
        ]
    },
页面路由跳转写法:
<router-link class="lis" tag="li" v-for="(item,index) in side" :to="{path:item.url,query:{appMsg}}" :key="index">
       {{item.name}}
</router-link>
问题,一次进入默认路由时,不传递参数,只有在之后的点击第一个路由时才传递
解决方法:
1.去除router.js的redirect属性
2.在pageB页面第一次页面加载请求到数据后添加
let appMsg = this.appMsg
 this.$router.push({path:'/app-manage/appMsg',query:{appMsg}})

vue解决二级路由redirect(默认路由)不传参的问题的更多相关文章

  1. vue路由对不同界面进行传参及跳转的总结

    最近在做一个公众号的商城项目,主要用的VUE+MUI,其实今天这个点对于有过项目经验的前端工作者来说是最基础的,但也是必须要掌握的,今天小编主要是记录下传参和跳转的一些总结(仅供参考). 首先我们先上 ...

  2. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

  3. vue 路由 以及默认路由跳转

    https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...

  4. Vue中的路由 以及默认路由跳转

    https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...

  5. WebApi-2 自定义路由与默认路由

    向Web API添加路由 public static void Register(HttpConfiguration config) { //// Web API 配置和服务 //// 将 Web A ...

  6. 路由的query参数(传参)

    路由组件不会在组件里面放自己组件标签. 案例使用嵌套组件的,但是在Message组件下新增了组件Detail.vue index.html //引入bootstrap.css <link rel ...

  7. react路由的跳转和传参

    1.路由的跳转 一.DOM跳转 在需要跳转的页面导入import {Link} from 'react-router-dom',在需要跳转的地方使用link标签的to属性进行跳转,路由配置文件中导出的 ...

  8. vue中嵌套的iframe中控制路由的跳转及传参

    在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数 //iframe向vue传递跳转路由的参 ...

  9. 在ensp上静态路由以及默认路由基本配置

    原理 实验模拟 实验拓扑 实验参数 测试连通性 两台PCping一下,发现超时 为什么呢我们可以看一下这个路由表,发现没有网段为20的信息,所以我们要加上 加入当访问地址为20网段时,设置下一跳路由器 ...

  10. vue2.0路由(跳转和传参)经典介绍

    声明式 <router-link :to="...">编程式router.push(...) router.push('home')                 / ...

随机推荐

  1. VIVADO原理图中的概念

    VIVADO原理图的基本作用 * 查看不同层次下的逻辑关系或者网表关系 * 检查逻辑设计是否可以通过数字电路实现 * 观察重要的信号的走向,分析可能的优化方向 VIVADO原理图几个基本概念 (1) ...

  2. YOLACT++ : 实时实例分割,从29.8mAP/33.5fps到34.1mAP/33.5fps

    YOLACT是首个实时实例分割算法,但是准确率较SOTA差得有点多,YOLACT++从主干网络.分支和anchor的3个角度出发对YOLACT进行优化,在保持实时性的前提下提升了5map,论文改进的角 ...

  3. 04 jQuery遍历器

    04 jQuery遍历器 如果jQuery一次性选择了很多元素节点. 而我们又希望能拿到每一个元素中的相关信息. 此时可以考虑用jQuery的遍历器来完成对元素的循环遍历. 例如: <!DOCT ...

  4. OpenHarmony定义组件重用样式:@Styles装饰器

      如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,我们推出了可以提炼公共样式进行复用的装饰器@Styles. @St ...

  5. 赵海鹏:如何进行 OpenHarmony 音频特性架构设计和开发工作

    编者按:在 OpenHarmony 生态发展过程中,涌现了大批优秀的代码贡献者,本专题旨在表彰贡献.分享经验,文中内容来自嘉宾访谈,不代表 OpenHarmony 工作委员会观点. 赵海鹏 江苏润和软 ...

  6. 【直播回顾】OpenHarmony知识赋能六期第一课—OpenHarmony智能家居项目介绍

    6月16日晚上19点,知识赋能第六期第一节课 <OpenHarmony智能家居项目介绍> ,在OpenHarmony开发者成长计划社群内成功举行. 本次直播是"OpenHarmo ...

  7. 【直播回顾】OpenHarmony知识赋能五期第五课——多媒体子系统之视频解读

    5月19日晚上19点,知识赋能第五期第五节课<OpenHarmony标准系统多媒体子系统之视频解读>,在OpenHarmony开发者成长计划社群内成功举行. 本期课程,由深开鸿资深技术专家 ...

  8. Openstack之工作流程

    组件 OpenStack的核心部件即包括Nova(用于计算).Keystone(用于身份服务).Neutron(用于网络和地址管理).Cinder(块存储).Swift(对象存储).Glance(镜像 ...

  9. Bill的挑战

    看数据范围就知道应该要状压,也不难看出应该压缩位数的状态.所以设f[i][j]为前i位,相互匹配的字符串的状态. 那么,就会有 f[i+1][j&a[i][ch]]=(f[i+1][j& ...

  10. IIS 加载32dll失败

    前言 遇到一个这样的问题,因为在一个项目中是32位的,至于为什么是32位的呢,因为调用的都是老库,32位的,部署到iis出现错误如下: Server Error in '/' Application. ...