一:router-link标签跳转

 <router-link to='/citylist'><div class="header-right">城市</div></router-link>
<router-link :to="{path:'/partysubject',query:{id:3}}"></router-link>

二:

<button @click = "func()">跳转</button>
<script>
export default{
methods:{
func (){
this.$router.push({name: '/order/page1',params:{ id:'1'}});
}
}
}
</script>

补充一下第二点:

this.$router.push({path: ''/order/index''});
this.$router.push({path: '/order/page1',query:{ id:'2'}});
this.$router.push({name: '/order/page2',params:{ id:'6'}});

query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。

query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

												

vue-cli 跳转方式的更多相关文章

  1. vue的跳转方式(打开新页面)

    vue的跳转方式(打开新页面) 2018年11月22日 10:43:21 浊清... 阅读数 2043   版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和 ...

  2. vue的跳转方式(打开新页面)及传参

    1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="sp ...

  3. VUE页面跳转方式

    一.to +跳转路径 <router-link to="/">跳转到主页</router-link> <router-link :to="{ ...

  4. vue路由跳转的方式

    vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. t ...

  5. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  6. Vue路由的跳转方式

    Vue中路由的跳转方式 一.<router-link to=''></router-link> Header.vue <template> <header&g ...

  7. vue/cli新旧版本安装方式

    一.老版本安装  Shift+鼠标右键 选择打开命令窗口 1.创建项目之前,需先确保本机已经安装node 在命令窗口中执行node -v npm -v 2.一般情况下用npm安装东西比较慢,可以使用淘 ...

  8. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  9. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  10. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

随机推荐

  1. SPARK安装二:HADOOP集群部署

    一.hadoop下载 使用2.7.6版本,因为公司生产环境是这个版本 cd /opt wget http://mirrors.hust.edu.cn/apache/hadoop/common/hado ...

  2. python入门之两种方法修改文件内容

    1.占硬盘修改 import os file_name="兼职.txt" new_file_name="%s.new".% file_name old_str= ...

  3. springboot 初始化 web 项目 启动报错。。。一直解决不了

    1. 一个简单的SpringBoot项目,启动时报错信息: ERROR 18688 --- [cat-startStop-1] org.apache.catalina.core.ContainerBa ...

  4. LOJ-10102(桥的判断)

    题目链接:传送门 思路:找桥就行了,条件是num[v]<low[u],pre!=v; #include<iostream> #include<cstdio> #inclu ...

  5. orabbix监控oracle

    Orabbix 是一个用来监控 Oracle 数据库实例的 Zabbix 插件.下载地址: http://www.smartmarmot.com/product/orabbix/download/ O ...

  6. Paper | 亚像素运动补偿 + 视频超分辨

    目录 1. ABSTRACT 2. INTRODUCTION 3. RELATED WORKS 4. SUB-PIXEL MOTION COMPENSATION (SPMC) 5. OUR METHO ...

  7. 关于poi导出excel三种方式HSSFWorkbook,SXSSFWorkbook,csv的总结

    poi导出excel最常用的是第一种方式HSSFWorkbook,不过这种方式数据量大的话会产生内存溢出问题,SXSSFWorkbook是一种大数据量导出格式,csv是另一种excel导出的一种轻快的 ...

  8. ajax 删除数据无刷新

    //html页面 <!doctype html><head> <title></title> <meta http-equiv="Con ...

  9. Oracle OMF管理数据文件

    1.什么是OMF? Oracle managed file的缩写,简单的理解,就是oracle自己管理自己的文件,可以是dbf,redolog 等等,具体可以参考官方文档Adiministrator中 ...

  10. Android 页面跳转之生命周期调用顺序问题

    Android Activity 常用技巧 Android Activity 启动模式和任务栈 Android 页面跳转之生命周期调用顺序问题 一.页面跳转逻辑分析 1.1 跳转逻辑分析 Androi ...