一: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. 2019年Python数据挖掘就业前景前瞻

    Python语言的崛起让大家对web.爬虫.数据分析.数据挖掘等十分感兴趣.数据挖掘就业前景怎么样?关于这个问题的回答,大家首先要知道什么是数据挖掘.所谓数据挖掘就是指从数据库的大量数据中揭示出隐含的 ...

  2. CMD命令启动和关闭SQL服务

    1.开启:net start mssqlserver 2.关闭:net stop mssqlserver

  3. 解决刚刚安装完mysql 远程连接不上问题

    解决远程连接mysql错误1130 远程连接Mysql服务器的数据库,错误代码是1130,ERROR 1130: Host xxx.xxx.xxx.xxx  is not allowed to con ...

  4. C++探究foreach算法

    for_each在algorithm.h 中 template<class _InIt, class _Fn1> inline _Fn1 for_each(_InIt _First, _I ...

  5. brew安装和换源

    命令行执行ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)&q ...

  6. 学以致用二十七-----Centos7.5二进制安装mysql5.7.23

    首先去官网查看mysql版本.才一个礼拜不到,我之前下载的是mysql5.7.23,现在在官网页面已然找不到了,只有5.7.24版本,不得不说更新真快.不过我下载的是mysql5.7.23,所以还是安 ...

  7. Nginx unit 源码安装初体验

    Nginx unit 源码安装初体验 上次介绍了从yum的安装方法(https://www.cnblogs.com/wang-li/p/9684040.html),这次将介绍源码安装,目前最新版为1. ...

  8. 前端之html概述及基本结构

    html概述: HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标 ...

  9. 【repost】javascript:;与javascript:void(0)使用介绍

    有时候我们在编写js过程中,需要触发事件而不需要返回值,那么就可能需要这样的写法 最近看了好几个关于<a>标签和javascript:void(0)的帖子,谨记于此,以资查阅. 注:以下代 ...

  10. UEditor的jQuery插件化 -转

    UEditor本身并不依赖jQuery,但如果在项目中同时使用两者的话,可能会希望使用jQuery语法创建和获取编辑器实例.为此,需要为jQuery编写插件,代码如下: (function ($) { ...