3.vue-router之什么是动态路由
时间:2022-06-09
本文章向大家介绍3.vue-router之什么是动态路由,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言: 今天我来给大家说道说道v-router,这是个什么东西?我们先从动态路由讲起。 GitHub:https://github.com/Ewall1106/mall/tree/master
1、动态路由有一个什么适用场景呢?
比如在写商品详情页面的时候,页面结构都一样,只是商品id的不同,所以这个时候就可以用动态路由动态。
2、官方文档
首先我们来看看官方文档上是怎么解释动态路由的?(https://router.vuejs.org/zh-cn/)
你可以在一个路由中设置多段“路径参数”,对应的值都会设置到$route.params
中。例如:
路径参数
3、动手试一试
看不懂?有点迷糊?没关系,我们亲自上手试一试,实践出真章嘛。
① 首先我们动手试一下上面表格中第一个模式的实现,我们新建一个文件夹并命名为view,然后在文件夹下新建test.vue
test.vue
② 到router文件夹下
》index.js文件
》打开并输入
index.js
③ 再到test.vue
组件中敲:
test.vue
在这里需要说明一下$route.params.testId
是什么意思了,大概你也猜得出来,就是获取当前路由的参数。
④ 现在输入localhost:8080/#/test/
这里随便带个什么参数”就可以就可以看到:
Image.png
以上这就是动态路由的第一个模式了。
如果第一个模式你能看懂,那么表格中的第二个模式也就不在话下,我就不做标注解释了,同理;有疑问留言。 上图:
修改路由index.js文件
修改test.vue文件
浏览器中输入
参考链接 https://router.vuejs.org/zh-cn/
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- B站签到-云函数
- echarts常用功能封装|抽象为mixin
- TCB系列学习文章——云开发的云托管(八)
- TCB系列学习文章——云开发登录篇(九)
- 字符串操作的全面总结
- C 语言 C++ 中 assert 的用法
- kubernetes之StatefulSet控制器
- 如何使用 S3CMD 访问 COS 服务
- 利用STS临时密钥服务快速搭建直传页面的实践
- codeforces 1436C(二分+数学)
- WAF案例:为什么curl可以wget不行?
- React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理
- React进阶(5)-分离容器组件,UI组件(无状态组件)
- React进阶(6)-react-redux的使用
- Kubernetes 1.19.0——服务svc(2)