讲解vue-router之什么是编程式路由


Posted in Javascript onMay 28, 2018

前言:编程式路由在我们的项目使用过程中最常用的的方法了。

GitHub:https://github.com/Ewall1106/mall/

什么是编程式路由呢?就是通过写js代码来实现页面的跳转

1.$router.push('name'); 或者 $router.push({path: 'name'});

首先我们来讲讲简单的,上面两个方法记住,等效的。

① 还是在test.vue组件里面写个div并给它添加一个click跳转事件:

讲解vue-router之什么是编程式路由

div上添加一个click点击事件

② 在view文件下新建一个goods.vue

讲解vue-router之什么是编程式路由

goods.vue

③ 在router中引入这个goods组件

讲解vue-router之什么是编程式路由

路由

④ 打开路径为test的页面并点击

讲解vue-router之什么是编程式路由

localhost

⑤ ok,点一下我们就到goods页面了,实现了跟router-view标签一样的效果

讲解vue-router之什么是编程式路由

goods页面

Ok,到这里我们已经实现了编程式路由的跳转了,接下来我们来试试路由携带参数跳转并接受参数。

2.$router.push({path: 'name?a=123'}) 或者 $router.push({path: 'name',query:{a:123}})这两种方式都可以

话不多说,看图你应该能看懂:

讲解vue-router之什么是编程式路由

路由跳转并携带参数

② 在goods.vue中输入

提醒一句,这里的获取上一级页面传过来的参数是$route.query.goodsId,是$route不是$router

讲解vue-router之什么是编程式路由

goods.vue

③ ok,我们就可以看到页面中显示上级页面传过来的参数了:

讲解vue-router之什么是编程式路由

localhost

讲解vue-router之什么是编程式路由

goods.vue

3.$router.go();

这个就随意提一下,就是类似于history.go()的方法,括号里面填个1就是前进一级页面,-1就后退一级页面。差不多就是这样。

参考学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
讲解vue-router之什么是嵌套路由
May 28 #Javascript
微信小程序上传图片实例
May 28 #Javascript
讲解vue-router之什么是动态路由
May 28 #Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 #Javascript
微信小程序实现上传图片功能
May 28 #Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 #Javascript
vue-cli构建项目下使用微信分享功能
May 28 #Javascript
You might like
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP文件操作实例总结
2016/09/27 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
js选择器全面解析
2016/06/27 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
小程序实现留言板
2018/11/02 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
优秀求职信
2014/05/29 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
关于观后感的作文
2015/06/18 职场文书
房屋质量投诉书
2015/07/02 职场文书
职工食堂管理制度
2015/08/06 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
OpenCV实现普通阈值
2021/11/17 Java/Android