vue-cli 跳转方式
一: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 跳转方式的更多相关文章
- vue的跳转方式(打开新页面)
vue的跳转方式(打开新页面) 2018年11月22日 10:43:21 浊清... 阅读数 2043 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和 ...
- vue的跳转方式(打开新页面)及传参
1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="sp ...
- VUE页面跳转方式
一.to +跳转路径 <router-link to="/">跳转到主页</router-link> <router-link :to="{ ...
- vue路由跳转的方式
vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. t ...
- 详解vue 路由跳转四种方式 (带参数)
详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1. router-link ? 1 2 3 4 5 6 7 8 9 10 ...
- Vue路由的跳转方式
Vue中路由的跳转方式 一.<router-link to=''></router-link> Header.vue <template> <header&g ...
- vue/cli新旧版本安装方式
一.老版本安装 Shift+鼠标右键 选择打开命令窗口 1.创建项目之前,需先确保本机已经安装node 在命令窗口中执行node -v npm -v 2.一般情况下用npm安装东西比较慢,可以使用淘 ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy
1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...
随机推荐
- MySQL优化(四) 慢查询的定位及优化
一.SQL语句优化的一般步骤: (1)通过 show status 命令了解各种 SQL 的执行效率: (2)定位执行效率较低的 SQL 语句(重点是 Select): (3)通过 explain 分 ...
- Oracle 忘记sys与system管理员密码重置操作
首先打开cmd 执行 orapwd file=C:\app\PWDorcl.ora password=orclorcl C:\app\PWDorcl.ora是你要存放的路径文件 Password=or ...
- boost asio 网络聊天 代码修改学习
简化asio的聊天代码 去除ROOM的设计 所有连接客户端均在同一个ROOM下 /*********************************************************** ...
- boost学习 内嵌类型检测 与 any 的代码练习
本文是学习 boost源码的一些练习 参考文章来自 刘未鹏 C++的罗浮宫(http://blog.csdn.net/pongba) 目录 http://blog.csdn.net/pongba/ar ...
- 转载-js如何设置网页横屏和竖屏切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Knockout.js组件系统的详解之(一) - 组件的定义和注册
(Knockout版本:3.4.1 ) KO的组件主要从以下四个部分进行详细介绍: 1.组件的定义和注册 2.组件绑定 3.使用自定义元素 4.自定义组件加载器(高级) 目录结构 1.通过" ...
- Collision (hdu-5114
题意:你有一个以(0, 0), (x, 0), (0, y), (x, y)为边界点的四边形,给你两个点从(x1, y1), (x2, y2)的点发射,以(1, 1)的速度走,碰到边界会反射,问你最终 ...
- PHP字符串截取函数
substr函数 描述:实现截取字符串 语法:string substr(string $string,int $start [, int $length ]) 说明:如果省略length,则返回从s ...
- Django中的缓存(内存,文件,redis)
一.Django中的缓存的几种方法 1)单个视图缓存.时间测试 import time from django.views.decorators.cache import cache_page @ca ...
- JavaScript:void(0)使用介绍
1.点击链接后不做任何事情(为防止点击链接后跳转到页首,onclick事件return false即可) <a href="javascript:void(0);" > ...