美文网首页vue专题vue
1、vue-router之什么是动态路由

1、vue-router之什么是动态路由

作者: world_7735 | 来源:发表于2019-02-27 15:33 被阅读104次

1、动态路由有一个什么适用场景呢?

比如在写商品详情页面的时候,页面结构都一样,只是商品id的不同,所以这个时候就可以用动态路由动态。

2、官方文档

首先我们来看看官方文档上是怎么解释动态路由的?(https://router.vuejs.org/zh-cn/

你可以在一个路由中设置多段“路径参数”,对应的值都会设置到$route.params中。例如:

image

3、动手试一试

看不懂?有点迷糊?没关系,我们亲自上手试一试,实践出真章嘛。

① 首先我们动手试一下上面表格中第一个模式的实现,我们新建一个文件夹并命名为view,然后在文件夹下新建test.vue

image

② 到router文件夹下index.js文件 》打开并输入

image

③ 再到test.vue组件中敲:

image

在这里需要说明一下$route.params.testId是什么意思了,大概你也猜得出来,就是获取当前路由的参数。

④ 现在输入localhost:8080/#/test/这里随便带个什么参数”就可以就可以看到:

image

以上这就是动态路由的第一个模式了。

如果第一个模式你能看懂,那么表格中的第二个模式也就不在话下,我就不做标注解释了,同理;有疑问留言。
上图:

image image image

参考链接
https://router.vuejs.org/zh-cn/

相关文章

  • Vue常见面试题

    1.怎么定义vue-router的动态路由?怎么获取传递过来的动态参数? 何为动态路由?能够提供参数的路由即为动态...

  • 手写 Vue Router、手写响应式实现、虚拟 DOM 和 D

    Vue-Router 原理实现 一、Vue-Router 动态路由 二、Vue-Router 嵌套路由 三、Vue...

  • 1、vue-router之什么是动态路由

    1、动态路由有一个什么适用场景呢? 比如在写商品详情页面的时候,页面结构都一样,只是商品id的不同,所以这个时候就...

  • vue-router之命名路由和命名视图

    6、vue-router之命名路由和命名视图 1.首先来说说什么是命名路由? 就是在routers配置路由名称的时...

  • vue router

    简单的路由原理,基于组件 vue-router学习 1.使用 2.入口 3.JavaScript 动态路由监听$r...

  • vue-router学习笔记

    vue-router 动态路由匹配 编程式路由 点击等同于调用rou...

  • Vue.js面试总结

    1、怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 在router目录下的index.js文件...

  • vue-router学习总结

    1.引入vue-router npm install vue-router --save 2.设置路由(1)路由实...

  • [vue-router] Duplicate named rou

    翻译:vue-router 重复的命名路由定义静态路由:只需要修改重复 name动态路由:没有添加过才添加

  • vue 动态理由

    1、概念 动态添加 vue-router 路由规则。经典使用场景:根据当前登录用户权限进行路由规则的添加。详见 v...

网友评论

    本文标题:1、vue-router之什么是动态路由

    本文链接:https://www.haomeiwen.com/subject/itjfuqtx.html