// 命名的路由(这里的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. python之路《八》装饰器

    装饰器是个好东西啊 那么装饰器是个什么样的东西呢,他又能做些什么呢? 1.为什么装饰器 当我们一个程序已经构建完成,并且已经发布出去了,但是现在需要增加一个活动,例如淘宝给你发送一个今日优惠,或者开启 ...

  2. 预估ceph的迁移数据量

    引言 我们在进行 ceph 的 osd 的增加和减少的维护的时候,会碰到迁移数据,但是我们平时会怎么去回答关于迁移数据量的问题,一般来说,都是说很多,或者说根据环境来看,有没有精确的一个说法,到底要迁 ...

  3. Android10_原理机制系列_Activity窗口添加到WMS过程

    前言 首先看一个Android界面的布局层次结构,最直观的看一下: 我们能清晰看到,这个界面分成了3部分:顶部状态栏(statusbar).底部导航栏(navigationbar).应用界面. 题外话 ...

  4. 为什么 @Value 可以获取配置中心的值?

    hello,大家好,我是小黑,好久不见~~ 这是关于配置中心的系列文章,应该会分多篇发布,内容大致包括: 1.Spring 是如何实现 @Value 注入的 2.一个简易版配置中心的关键技术 3.开源 ...

  5. Guitar Pro吉他指弹入门——特殊调弦

    本期文章中,我们将通过吉他打谱软件Guitar Pro 7来向大家讲解指弹曲目中所涉及的特殊调弦. 作为一个吉他手,在练琴的时候总会遇到各种各样的问题,比如说鼓手不肯跟你合作(因为打鼓往往不能露脸), ...

  6. 找回消失的IDM嗅探下载浮动条的方法

    我们之前讲了IDM资源嗅探的下载浮动条的设置方法,然而在有些时候,这个下载浮动条无法正常显示出来,影响了下载体验,这个问题该如何解决呢? 1.安装IDM扩展程序 一般来说,在IDM安装完成后,会在浏览 ...

  7. jQuery 第五章 实例方法 事件

    .on() .one() .off() .trigger() .click / keydown / mouseenter ...    .hover() ----------------------- ...

  8. 从递归到memo到动态规划

    //memo,记忆化搜索 class Solution {    int[][] memo;    public boolean wordBreak(String s, List<String& ...

  9. python基础之操作列表

    遍历元素 magicians = ['alice','david','carolina'] for magician in magicians: print(magician) magicians = ...

  10. NOIP2020 游记

    为了防止被禁赛三年,这里说明一下,本篇游记是提前开坑的. 10.9 上午模拟赛,下午初赛改成了全天初赛. 但还是想了会儿题,写了两道水题找找信心吧,毕竟前几天挂分挺严重的. 机房还是挺乱的,甚至连自己 ...