当前位置: 首页 > 编程笔记 >

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

弘靖琪
2023-03-14
本文向大家介绍讲解vue-router之什么是动态路由,包括了讲解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/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍讲解vue-router之什么是嵌套路由,包括了讲解vue-router之什么是嵌套路由的使用技巧和注意事项,需要的朋友参考一下 上一次给大家简单说了下什么是动态路由现在我们来讲讲嵌套路由。 GitHub:https://github.com/Ewall1106/mall 1.嵌套路由的使用场景是什么呢? 大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容;这个时

  • 本文向大家介绍vue-router实现嵌套路由的讲解,包括了vue-router实现嵌套路由的讲解的使用技巧和注意事项,需要的朋友参考一下 一、嵌套路由(配置好父路由component后,在父路由下面添加children属性来配置这个父路由的子路由) 需要注意的是:父组件中的<router-view></router-view>是子组件的占位符是必不可少的 嵌套路由的现象:点击了路由跳转之后父路由

  • 推荐直接使用官方 vue-router,VUX部分组件支持link属性直接支持vue-router的路由参数,vux2模板内置了vue-router。 如果使用了过渡(转场动画),在iPhone上使用左划返回时动画会再执行一遍,目前没有找到可行的处理方法,如果你有处理方案,欢迎PR。 https://github.com/airyland/vux/pull/2259

  • 本文向大家介绍vue router动态路由下让每个子路由都是独立组件的解决方案,包括了vue router动态路由下让每个子路由都是独立组件的解决方案的使用技巧和注意事项,需要的朋友参考一下 vue-router 之动态路由 下面看下vue router动态路由下让每个子路由都是独立组件的解决方案 因为 vue-router 对嵌套路由采用的是组件复用策略,这在大部分场景的确是高效的做法,但是如果

  • 什么是路由 后端路由 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源。 当前端输入url请求资源时,服务器会监听到是什么url地址,那后端会返回什么样的资源呢?后端这个处理的过程就是通过路由来分发的。 总结:后端路由,就是把所有url地址都对应到服务器的资源,这个对应关系就是路由。 前端路由 对于单页面应用程序来说,主要通过URL中的hash(url地址中的#

  • 本文向大家介绍详解vue-router 动态路由下子页面多页共活的解决方案,包括了详解vue-router 动态路由下子页面多页共活的解决方案的使用技巧和注意事项,需要的朋友参考一下 我们都知道 vue-router 的动态路由匹配 对组件是原地复用的策略,需要我们在组件中根据不同的 $route 参数展示不同的数据,这在大部分情景下是很高效的做法,但这无疑增加了组件的复杂度,而且不同参数间切换因