讲解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 相关文章推荐
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
讲解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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
[JS]点出统计器
2020/10/11 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
Node.js文件操作详解
2014/08/16 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
python基于multiprocessing的多进程创建方法
2015/06/04 Python
python妹子图简单爬虫实例
2015/07/07 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
Python json转字典字符方法实例解析
2020/04/13 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
Python高并发和多线程有什么关系
2020/11/14 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
财务管理专业推荐信
2013/11/19 职场文书
上班上网检讨书
2014/01/29 职场文书
应聘英语教师求职信
2014/04/24 职场文书
政风行风整改报告
2014/11/06 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书