讲解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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
JavaScript null和undefined区别分析
Oct 14 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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的消息通信机制测试实例
2016/11/10 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
php7下的filesize函数
2019/09/30 PHP
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
应届生如何写自荐信
2014/01/05 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
水电维修专业推荐信
2014/09/06 职场文书
停车位租赁协议书
2014/09/24 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
政工师工作总结2015
2015/05/26 职场文书
法人代表资格证明书
2015/06/18 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js