讲解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/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue-router2.0动态路由获取参数

    详解vue-router2.0动态路由获取参数

    一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js&qu

  • VUE+elementui面包屑实现动态路由详解

    我的路由: const routerMap = [ { path: '/', redirect: 'dashboard', component: Layout, name:'Dashboard', children: [ { path: 'dashboard', component: () => import('@/view/dashboard'), name: 'Dashboard', meta: { title: 'dashboard', icon: 'dashboard', noCache

  • vue router返回到指定的路由的场景分析

    项目场景: 项目场景:示例:A(商品详情)--B(商品购买页面)-C(支付成功页面)--D(订单页面) 问题描述: 提示:这里描述项目中遇到的问题: 如果我们不做控制的话,安卓按照浏览器返回机制,依次从D-C-B-A这样子,这样子会有一定的bug,测试那边也是说不过去啊,原本想利用beforeRouteLeave这个来操作进行更改跳转,发现还是有点问题最后还是用beforeRouteEnter来操作了,先放上两个的区别吧: 这里先介绍一下导航守卫 > beforeRouteEnter 离开路由之

  • vue后台管理如何配置动态路由菜单

    vue后台管理如何配置动态路由菜单

    目录 后台管理配置动态路由菜单 根据权限生成动态路由及导航菜单 后台管理配置动态路由菜单 前段时间做一个后台管理项目,因为超级管理员可以给普通管理员动态更改权限,所以vue-element-admin里的写死的权限路由菜单就不太适合我,自己研究了好半天,经历了各种死循环,终于差不多弄出了一个,可能会有点啰嗦,总结一下: 我这个后台分为三个角色:超级管理员.企业管理员和普通管理员.其中,超级管理员可以查看所有的路由菜单,企业管理员也是固定的几个菜单,所以,超级管理员和企业管理员是我在前端写好的路由

  • vue+Vue Router多级侧导航切换路由(页面)的实现代码

    当当当当当~我又来了. 在项目里经常会遇到侧导航切换页面的功能. 如果我们将侧导航做成公共组件,来调用的话,就会在每一个页面都引用该组件,在后期维护的时候比较麻烦,比如改参数. 所以此文将侧导航做成父页面组件,将切换的页面做成子页面,这样只需调用一次即可.大大减少了后期维护的麻烦 涉及功能点 侧导航支持多级 Vue Router的使用方法( 官方文档 ) 子父组件的写法 样式:elementUI 效果图 实现 --- 目录结构 --- Vue Router的使用方法 首先安装 npm insta

  • vue如何根据权限生成动态路由、导航栏

    vue如何根据权限生成动态路由、导航栏

    目录 基本思路 相关代码 基本思路 1.创建vueRouter,用公共路由实例化 2.创建需要根据权限筛选的路由对象(在路由对象,添加必要的权限判断字段) 3.登录完成,由后端配合返回当前用户的权限集合 4.筛选出有权限的路由对象,利用vueRouter的addRoutes方法,生成完整路由 5.处理刷新页面导致vueRouter重新实例化导致路由对象不完善 (利用router.beforeEach导航守卫,,利用addRoutes()完善 路由对象 ) 6.侧边导航栏相关代码 相关代码 根据上

  • 全面解析vue router 基本使用(动态路由，嵌套路由)

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念 route,

  • vue router权限管理实现不同角色显示不同路由

    vue router权限管理实现不同角色显示不同路由

    目录 思路: 主要逻辑代码 全部页面代码 思路: login页面登录时 加上角色的标记,存储到本地缓存(localstorage) 路由js文件,meta属性加个是否可见(visiable true或false) home 基本导航栏页面逻辑,首先 可以获得到 所有一级菜单和角色标记 for 循环一级菜单 找出角色 所在的 角色数组(判断某个值在不在 数组中) 然后 所在的数组 visiable 改为true ,其他的改为false ui框架 是ant design of vue 主要逻辑代码

  • vue vuex vue-rouert后台项目——权限路由（适合初学）

    vue vuex vue-rouert后台项目——权限路由（适合初学）

    项目地址: vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面(共三个页面) barbara 拥有 权限B 他可以看到 red 和 yellow 页面 carrie 拥有 权限C 他可以看到 red 和 blue 页面 技术栈 webpack ---- 打包神器 vue ---- JavaScript 框架 vuex ---- 实现不同组件间的状态

  • vue3动态路由刷新后空白或者404问题的解决

    目录 前言 实现 登出页面需要清除缓存 排错过程 总结 前言 之前用vue+ant-design-vue写了一个动态路由的页面,更新看一下不能用了555~~~ 之前用的组件版本不知道了,回退也不知道哪个版本合适,就是用"vue": "^3.2.13" , "vue-router": "^4.0.3","vuex": "^4.0.0",ant-design-vue": "

  • vue router学习之动态路由和嵌套路由详解

    vue router学习之动态路由和嵌套路由详解

    本文主要参考:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 本文的阅读前提是已经能够搭建一个vue前台程序并且运行.如果还么有搭建可以参考文章: http://www.jb51.net/article/111650.htm 好,下面上货. 首先介绍一下动态路由. 动态路由按照我的理解,就是说能够进行页面的跳转,比如说:下面的这个页面中: <template> <div id="app">

随机推荐