vue-router 编程式路由
$route -> 使用它的属性
$router-> 使用它的方法
编程式的导航,即js控制跳转
//声明式:<router-link :to="...">
//编程式:this.$router.push('home')
另一种跳转
//声明式:<router-link :to="..." replace>
//编程式:this.$router.replace('home')
$router.push
放入跳转的路由/路径
想要导航到不同URL,则使用 router.push 方法
//比如:this.$router.push('/c')
push可以是字符串可以是对象也可以带查询参数
//字符串
router.push('home') // 对象
router.push({ path: 'home' }) // 命名的路由
router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
$router.go
在 history 记录中向前或者后退多少步,类似window.history.go(n)
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1) // 后退一步记录,等同于 history.back()
router.go(-1) // 前进 3 步记录
router.go(3) // 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
$router.replace(location)
把当前路径替换成xxx,比如:['/','/a','/c']
replace 与 push不同的是:
它不会向 history 添加新记录,而是替换掉当前的 history 记录
(使用replac跳转的 后腿按钮不能点击 )


vue-router 编程式路由的更多相关文章
- vue.js编程式路由导航 --- 由浅入深
编程式路由导航 实例中定义一个方法,这个方法绑定在标签上 然后就设置路由跳转 语法 this.$router.history.push('要跳转路由的地址') <!DOCTYPE html> ...
- vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航
路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...
- VueJs(10)---vue-router(动态路由,嵌套式路由,编程式路由)
vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...
- 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】
## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...
- SpringMVC 解析(四)编程式路由
多数情况下,我们在使用Spring的Controller时,会使用@RequestMapping的形式把请求按照URL路由到指定方法上.Spring还提供了一种编程的方式去实现请求和路由方法之间的路由 ...
- vue编程式路由实现新窗口打开
一. 标签实现新窗口打开: 官方文档中说 v-link 指令被 组件指令替代,且 不支持 target=”_blank” 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 ta ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- Vue编程式路由跳转传递参数
Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
随机推荐
- Codeforces Bubble Cup 11 J. Moonwalk challenge加强版
题意 有一棵 \(n\) 个节点的树,每条边上有一个字符,有 \(m\) 次询问. 每次会选定两个点 \(u, v\) , \(u\) 到 \(v\) 的路径上的字符形成了一个字符串 \(T\) ,再 ...
- 【BZOJ5308】[ZJOI2018]胖(模拟,ST表,二分)
[BZOJ5308][ZJOI2018]胖(模拟,ST表,二分) 题面 BZOJ 洛谷 题解 首先发现每条\(0\)出发的边都一定会更新到底下的一段区间的点. 考虑存在一条\(0\rightarrow ...
- hexo博客添加功能
设置Hexo主题模式 Hexo主题中,有三种不同的模式,通过切换模式,让NexT主题显示不一样的样式.在NexT根目录下有一个同样名称为_config.yml,为了区分hexo根目录下的_config ...
- macOS在virtualenv中使用wxPython报错
在虚拟的Python环境中运行GUI的软件报错 This program needs access to the screen. Please run with a Framework build o ...
- tyvj/joyoi 1336 火车进栈
比原题水了很多(因为原题要高精度) 输出字典序前20种出栈序列. 其实是贪心题:我们每次确定一个出栈的数. 当栈里有数时,字典序显然比从后面拿数要小,所以先搜这个. 之后依次搜后面队列里的数,因为字典 ...
- A1126. Eulerian Path
In graph theory, an Eulerian path is a path in a graph which visits every edge exactly once. Similar ...
- 如何使用Senparc.Weixin SDK 底层的Redis缓存并设置过期时间
最近在微信第三方平台项目开发中,有一个需求,所有绑定的公众号的回复规则按照主公众号的关键词配置来处理,我的处理思路是获取主公众号配置的关键词回复规则,缓存10分钟,由于需要使用Redis缓存来存储一些 ...
- 第二十五篇-Android 应用资源
这里介绍android的一些资源文件. 以一个登录界面为例. layout.xml <?xml version="1.0" encoding="utf-8" ...
- 团体程序设计天梯赛(CCCC) L3012 水果忍者 上凸或下凹的证明
团体程序设计天梯赛代码.体现代码技巧,比赛技巧. https://github.com/congmingyige/cccc_code #include <cstdio> #include ...
- my97DatePicker选择年、季度、月、周、日(转)
My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 下面总结下使用该日历控件选择年.季度.月.周.日的方法. 1.选择年 <input id="d1212&quo ...