// 命名的路由(这里的name为路由中定义的name名称)
this.$router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数,变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }}) /*注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:*/ const userId = '123'
this.$router.push({ name: 'user', params: { userId }}) // -> /user/123
this.$router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
this.$router.push({ path: '/user', params: { userId }}) // -> /user

  

vue 编程式导航的更多相关文章

  1. vue编程式导航

    vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...

  2. vue编程式导航,命名路由

    //使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...

  3. Vue 编程式导航,路由history模式

    import Vue from 'vue' import App from './App.vue' import Home from './components/Home.vue' import Ne ...

  4. Vue 编程式导航(通过js跳转页面)以及路由hash模式和history模式

    第一种方法: this.$router.push({path:'shopcontent?aid=3'}   第二种方法   this.$router.push({name:'news'}} 通过在ma ...

  5. VueRouter爬坑第四篇-命名路由、编程式导航

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  6. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  7. [vue]声明式导航和编程式导航

    声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...

  8. Vue 路由的编程式导航与history模式

    编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...

  9. vue中声明式导航和编程式导航

    官方文档:https://router.vuejs.org/zh-cn/essentials/navigation.html 声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切 ...

随机推荐

  1. Pytorch显存动态分配规律探索

    下面通过实验来探索Pytorch分配显存的方式. 实验 显存到主存 我使用VSCode的jupyter来进行实验,首先只导入pytorch,代码如下: import torch 打开任务管理器查看主存 ...

  2. MongoDB基础教程(安装、操作、配置)

    MongoDB 下载安装 简易安装 # redhat, centOS sudo yum install -y mongodb # debian, ubuntu sudo apt install -y ...

  3. Socket bind系统调用简要分析

    主要查看linux kernel 源码:Socket.c 以及af_inet.c文件 1.1 bind分析 #include <sys/types.h> /* See NOTES */#i ...

  4. 一篇文章了解_docker

    (一)Docker介绍 2018年10月6日 星期六 15:04 什么就Docker? Docker是一个开源项目, 诞生于2013年初,最初是dotCloud公司内部的一个业余项目.它基于Googl ...

  5. H264Nalu头部解析

    一 NALU头部解析 F: forbidden_zero_bit. 在 H.264 规范中规定了这一位必须为 0. NRI: nal_ref_idc. 取00~11,似乎指示这个NALU的重要性,如0 ...

  6. 一文带你读懂!华为云在ACMUG技术沙龙上都透露了些啥?

    摘要:近日,华为云数据库业务总裁苏光牛在ACMUG中国MySQL用户组主办的 "华为云专场" 技术沙龙中分享了华为云数据库重磅新品GaussDB的核心能力与竞争优势.那么, Gau ...

  7. CorelDRAW 条形码改不了字体如何解决?

    看到有朋友提问说CorelDRAW条码生成设置里面的字体不能更改,是灰色的,不能选择.这个默认字体怎么改? 出现问题:条码生成设置里面的字体不能更改,是灰色的,不能选择. 解决方法一:找到C盘字体文件 ...

  8. 如何使用ABBYY FineReader 手动管理文档区域

    在运用OCR编辑器时,ABBYY FineReader 15(Windows系统)OCR文字识别软件会对扫描仪或数码相机导入的图像进行识别和检测.在识别和检测之前,软件会自动对PDF文档中的文本.图片 ...

  9. jenkins.war的配置

    目录 1.进入root用户-------切换到home下的用户-----然后查看lsx下的文件 2.移动jenkins.war 3.找到刚才移动的文件 4.启动tomcat 5.在浏览器登录 6.进入 ...

  10. 用FL Studio制作反向人声音效(Vocal Chops)

    人声切片在各类电子音乐中都被广泛运用,在FL Studio20中我们也可以运用其自带的插件来制作属于我们自己的人声切片效果.在学完这篇文章后你就可以动手做出如Kygo.Martin Garrix等大牌 ...