讲解vue-router之什么是动态路由


Posted in Javascript onMay 28, 2018

前言: 今天我来给大家说道说道v-router,这是个什么东西?我们先从动态路由讲起。

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

1、动态路由有一个什么适用场景呢?

比如在写商品详情页面的时候,页面结构都一样,只是商品id的不同,所以这个时候就可以用动态路由动态。

2、官方文档

首先我们来看看官方文档上是怎么解释动态路由的?(https://router.vuejs.org/zh-cn/)

你可以在一个路由中设置多段“路径参数”,对应的值都会设置到$route.params中。例如:

讲解vue-router之什么是动态路由

路径参数

3、动手试一试

看不懂?有点迷糊?没关系,我们亲自上手试一试,实践出真章嘛。

① 首先我们动手试一下上面表格中第一个模式的实现,我们新建一个文件夹并命名为view,然后在文件夹下新建test.vue

讲解vue-router之什么是动态路由

test.vue

② 到router文件夹下 》index.js文件 》打开并输入

讲解vue-router之什么是动态路由

index.js

③ 再到test.vue组件中敲:

讲解vue-router之什么是动态路由

test.vue

在这里需要说明一下$route.params.testId是什么意思了,大概你也猜得出来,就是获取当前路由的参数。

④ 现在输入localhost:8080/#/test/这里随便带个什么参数”就可以就可以看到:

讲解vue-router之什么是动态路由

Image.png

以上这就是动态路由的第一个模式了。

如果第一个模式你能看懂,那么表格中的第二个模式也就不在话下,我就不做标注解释了,同理;有疑问留言。

上图:

讲解vue-router之什么是动态路由

修改路由index.js文件

讲解vue-router之什么是动态路由

修改test.vue文件

讲解vue-router之什么是动态路由

浏览器中输入

参考链接

https://router.vuejs.org/zh-cn/

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

Javascript 相关文章推荐
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
js日期联动示例
May 02 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
深入探究node之Transform
Jul 20 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
为什么node.js不适合大型项目
Apr 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
vue2.0学习之axios的封装与vuex介绍
May 28 #Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 #Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
You might like
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php计算年龄精准到年月日
2015/11/17 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
python给list排序的简单方法
2020/12/10 Python
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
会计主管岗位职责范文
2013/11/08 职场文书
喝酒检查书范文
2014/02/23 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
自信主题班会
2015/08/14 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript