vue2.0路由(跳转和传参)经典介绍
声明式
<router-link :to="...">
编程式
router.push(...)
router.push('home') // 字符串
router.push({ path: 'home' }) // 对象
router.push({ name: 'user', params: { userId: 123 }}) // 命名的路由
router.push({ path: 'register', query: { plan: 'private' }}) // 带查询参数,变成 /register?plan=private
:username)的键值对信息,如{username: 'paolino'} /foo?user=1获取到query.user = 1 $route.router 所属路由器以及所属组件信息 router.replace(location)
跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
声明式
<router-link :to="..." replace>
编程式
router.replace(...)
router.go(n)
router.go(1) // 在浏览器记录中前进一步,等同于 history.forward()
router.go(-1) // 后退一步记录,等同于 history.back()
这两种方式都会把路由导航到 /user/123 路径。
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})
vue2.0路由(跳转和传参)经典介绍的更多相关文章
- vue 路由跳转,传参
一.直接跳转 //js1.this.$router.push('/ad_new') //html 2.<router-link to="/ad_check"> < ...
- vue 和 react 路由跳转和传参
react 1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...
- Angular:路由的配置、传参以及跳转
①路由的配置 1.首先用脚手架新建一个项目,在路由配置时选择yes 2.用ng g component创建组件 3.在src/app/app-routing.module.ts中配置路由 import ...
- vue2.0路由写法、传参和嵌套
前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
<script src="jquery.min.js" type="text/javascript"></script> <scr ...
- vue2.0路由
现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...
- (day68)Vue-CLI项目、页面跳转和传参、生命周期钩子
目录 一.Vue-CLI (一)环境搭建 (二)项目的创建 (三)项目目录结构 (四)Vue组件(.vue文件) (五)全局脚本文件main.js(项目入口) (六)Vue请求生命周期 二.页面跳转和 ...
- flutter页面间跳转和传参-Navigator的使用
flutter页面间跳转和传参-Navigator的使用 概述 flutter中的默认导航分成两种,一种是命名的路由,一种是构建路由. 命名路由 这种路由需要一开始现在创建App的时候定义 new M ...
- app之间的跳转和传参问题
app 之间跳转和传参: 首先 创建2个app formApp (需要跳转到另外app的项目) toApp(被跳转的项目) 一:在toApp 项目中的操作: 1:创建URLSchemes ...
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
随机推荐
- sdut 4-1 复数类的运算符重载
4-1 复数类的运算符重载 Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 通过本题目的练习能够掌握成员运算符重载及友元运算符重载 要求定义一个复数类.重 ...
- 2016/1/25 多线程 作业 方法一 继承Thread 方法二 实现Runnable 多线程笔记
/* * 1,尝试定义一个继承Thread类的类,并覆盖run()方法, * 在run()方法中每隔100毫秒打印一句话.*/ package Stream; //方法一 继承Thread 实现多线程 ...
- 洛谷 P1383 高级打字机==codevs 3333 高级打字机
P1383 高级打字机 18通过 118提交 题目提供者yeszy 标签倍增图论高级数据结构福建省历届夏令营 难度省选/NOI- 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目描述 早苗入手 ...
- 【bzoj1260】[CQOI2007]涂色paint
题意:就是说一开始一个序列是空的,然后每次可以将连续的一段染成同一颜色,问多少次才能到目标状态. 一开始想的是二分,然后题解DP... f[i][j]表示区间[i,j]需要染色多少次 首先初始状态是f ...
- 20170623_oracle_优化与体系结构
一般优化技巧 建议不用"*"代替所有列名 删除所有数据用TRUNCATE代替DELETE 用NOT EXISTS 代替NOT IN 用EXISTS代替IN 用EXISTS代替DIS ...
- POJ 2562:Primary Arithmetic
Primary Arithmetic Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11135 Accepted: 40 ...
- Bing必应地图中国API入门讲座之八:显示驾车路线
Bing必应地图中国API入门讲座之八:显示驾车路线 2011-05-24 14:47:36| 分类: Bing&Google|字号 订阅 这篇文章非常值得纪念,因为我是在Googl ...
- python中如何理解if __name__ == '__main__'
__name__ 是当前模块名,当模块被直接运行时模块名为 __main__ .这句话的意思就是,当模块被直接运行时,以下代码块将被运行,当模块是被导入时,代码块不被运行.我们通过一个简单的例子来理解 ...
- 第十五周 Leetcode 517. Super Washing Machines(HARD) 贪心
Leetcode517 很有趣的一道题 由于每一步可以任选某些数字对它们进行转移,所以实际上是在求最优解中的最复杂转移数. 那么我们考虑,到底哪一个位置要经过的流量最大呢? 枚举每个位置,考虑它左边的 ...
- bzoj2763 [JLOI2011]飞行路线——分层图
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2763 构建分层图. 代码如下: 写法1(空间略大)(时间很慢): #include<i ...