// 命名的路由(这里的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. [MIT6.006] 9. Table Doubling, Karp-Rabin 双散列表, Karp-Rabin

    在整理课程笔记前,先普及下课上没细讲的东西,就是下图,如果有个操作g(x),它最糟糕的时间复杂度为Ο(c2 * n),它最好时间复杂度是Ω(c1 * n),那么θ则为Θ(n).简单来说:如果O和Ω可以 ...

  2. Python_爬虫笔记_2018.3.19

    Python_爬虫_笔记 1.前言 1.1爬虫用途: 网站采集.接口采集(地图(jis 热力学 屋里端口/协议).微信.知乎.) 1.2基本流程:网页下载(requests)+网页解析+爬虫调度 网页 ...

  3. spring boot配置MySQL8.0 Druid数据源

    创建spring boot项目,在pom中添加相应依赖 <!--web--> <dependency> <groupId>org.springframework.b ...

  4. python-网络安全编程第一天(requests模块)

    前言 感觉现在做好多CTF题都需要python去写工具,正好期末考试放假利用空余时间来学学. requests简介 Requests是用python语言基于urllib编写的,采用的是Apache2 ...

  5. ctf-web-sql

    姿势文章总结 freebuf http://www.freebuf.com/news/139288.html http://www.freebuf.com/articles/web/137094.ht ...

  6. Python一行式代码

    # 简易Web Server,可以直接快速共享文件 python -m http.server # 脚本性能分析 python -m cProfile my_script.py # 列表辗平 impo ...

  7. 如何改变CorelDRAW的外观主题皮肤?

    CorelDRAW,我们通常也简称为CDR,是一款专业而且使用广泛的矢量图形绘制软件,也常用于绘制图形以及平面设计中.今天我们以CorelDRAW 2020来为大家演示一下,如何改变CorelDRAW ...

  8. httpservlet类中两个service方法

    在浏览器访问html页面时,当数据提交给servlet时发生了什么,这是我们需要了解的. 1.我们需要了解一下servlet的继承体系. servlet接口 ------->GenericSer ...

  9. centos8 yum 升级nginx

    原文地址:https://blog.csdn.net/lpwmm/article/details/105627476 CentOS8的Yum仓库中内置的nginx版本是1.14.1,最近漏扫提示需要升 ...

  10. LeetCode周赛#213

    5554. 能否连接形成数组 题目链接 题意 给定整数数组 arr ,其中每个整数互不相同 .另有一个由整数数组构成的数组 pieces,其中的整数也互不相同 .请以 任意顺序 连接 pieces 中 ...