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

 更新时间:2018年05月28日 13:45:46   作者:Ewall_  
这篇文章主要介绍了讲解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实现文字检索时候将搜索内容标红功能

    vue实现文字检索时候将搜索内容标红功能

    这篇文章主要介绍了vue中实现文字检索时候将搜索内容标红,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Vue2.0学习之详解Vue 组件及父子组件通信

    Vue2.0学习之详解Vue 组件及父子组件通信

    本篇文章主要介绍了Vue2.0学习之详解Vue 组件及父子组件通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue-cropper组件实现图片切割上传

    vue-cropper组件实现图片切割上传

    这篇文章主要为大家详细介绍了vue-cropper组件实现图片切割上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Vue 401配合Vuex防止多次弹框的案例

    Vue 401配合Vuex防止多次弹框的案例

    这篇文章主要介绍了Vue 401配合Vuex防止多次弹框的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue 的全选组件封装你知道多少

    vue 的全选组件封装你知道多少

    这篇文章主要为大家详细介绍了vue的全选组件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 一文带你上手Vue新的状态管理Pinia

    一文带你上手Vue新的状态管理Pinia

    Vuex 作为一个老牌 Vue 状态管理库,大家都很熟悉了,Pinia 是 Vue.js 团队成员专门为 Vue 开发的一个全新的状态管理库,本文就来讲讲它的具体使用吧
    2023-04-04
  • mpvue中使用flyjs全局拦截的实现代码

    mpvue中使用flyjs全局拦截的实现代码

    这篇文章主要介绍了mpvue中使用flyjs全局拦截的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 解决vue3 defineProps 引入定义的接口报错

    解决vue3 defineProps 引入定义的接口报错

    这篇文章主要为大家介绍了解决vue3 defineProps 引入定义的接口报错详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Vue使用百度地图实现城市定位

    Vue使用百度地图实现城市定位

    这篇文章主要为大家详细介绍了Vue使用百度地图实现城市定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue3缓存页面keep-alive及路由统一处理详解

    vue3缓存页面keep-alive及路由统一处理详解

    当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下
    2021-10-10

最新评论