Vue-router:6、动态路由匹配

最新推荐文章于 2024-02-19 11:47:11 发布
最新推荐文章于 2024-02-19 11:47:11 发布
阅读量226 收藏
点赞数 1
分类专栏： 笔记 vue-router 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tinglis/article/details/114311300
版权

Vue-router:6、动态路由匹配

6.1 动态匹配路由的基本用法

思考：

<!– 有如下 3 个路由链接 --> 
<router-link to="/user/1">User1</router-link> 
<router-link to="/user/2">User2</router-link> 
<router-link to="/user/3">User3</router-link> 

// 定义如下三个对应的路由规则，是否可行？？？
{ path: '/user/1', component: User } 
{ path: '/user/2', component: User } 
{ path: '/user/3', component: User }

虽然以上规则可以匹配成功，但是这样写比较麻烦。如果有100个规则，那么写起来就会非常的麻烦。

通过观察，可以发现整个路由规则中只有后续的数字是在变化的。所以这里可以通过动态路由参数的模式进行路由匹配。

var router = new VueRouter({ 
  routes: [     
      // 动态路径参数 以冒号开头     
      { path: '/user/:id', component: User } 
  ] 
}) 

const User = {   
    // 路由组件中通过$route.params获取路由参数 
    template: '<div>User {{ $route.params.id }}</div>' 
}

具体代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <!-- <script src="./lib/vue_2.5.22.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="./lib/vue-router_3.0.2.js"></script> -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

6.2 路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

第一种情况：

props的值为布尔类型

 const router = new VueRouter({ 
    routes: [       
        // 如果 props 被设置为 true，route.params 将会被设置为组件属性     
        { path: '/user/:id', component: User, props: true } 
    ] 
  }) 
 
  const User = { 
            props: ['id'], // 使用 props 接收路由参数     
                template: '<div>用户ID：{{ id }}</div>'  // 使用路由参数   
  }

在定义路由规则的时候，为其添加了props属性，并将其值设置为true.那么在组件中就可以通过props:['id']的形式来获取对应的参数值。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id'], //获取id的值。
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
            //将props设置为true.
          { path: '/user/:id', component: User, props: true },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

第二种情况： props的值为对象类型

 const router = new VueRouter({ 
    routes: [       
        // 如果 props 是一个对象，它会被按原样设置为组件属性   
        //这里相当于给组件User,通过路由的形式传递了一个对象，而这时候id在User组件中就无法获取到了。
        { path: '/user/:id', component: User, props: { uname: 'lisi', age: 12 }} 
    ] 
  }) 
 
  const User = { 
    props: ['uname', 'age'],   
      template: ‘<div>用户信息：{{ uname + '---' + age}}</div>'  
}

具体代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <!-- <script src="./lib/vue_2.5.22.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="./lib/vue-router_3.0.2.js"></script> -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

在上面的代码中，在路由规则中，通过props向用户组件中传递了一个对象，那么在User用户组件中可以接收到传递过来的对象。但是参数id无法接收到。

如果要解决这个问题，可以使用props的值为函数类型。也就是给props传递一个函数。

第三种情况：props的值为函数类型

const router = new VueRouter({ 
    routes: [       
        // 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参  
        //route就是参数对象。
        { path: '/user/:id',  
        component: User,  
        props: route => ({ uname: 'zs', age: 20, id: route.params.id })} 
    ] 
  }) 
 
  const User = { 
    props: ['uname', 'age', 'id'],    
      template: ‘<div>用户信息：{{ uname + '---' + age + '---' + id}}</div>'  
}

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <!-- <script src="./lib/vue_2.5.22.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="./lib/vue-router_3.0.2.js"></script> -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>
爱发呆的程序员
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React router6--路由表多级路由嵌套的默认子路由问题
Coding and studying
08-13 1486
最近小新在写一个基于React Hooks+Mobx+axios+react-router-dom v6+antD的前端项目，在进行二级路由配置时遇到了一些问题。path：" / " 时，重定向到Layout的子组件Home，路径为 " /home "。组件，然后再去重定向，渲染出子组件Home。，用路由表来统一管理路由，但是这个时候问题出现了。但是再一看，当点击其他的子路由，比如这个例子中的。时，他会渲染对应的子路由，但是！这个属性上，再定义一组子路由规则，但是。打开界面一看效果，嘿～还真行，......
vue-router 动态路由匹配
qq_41700374的博客
11-02 577
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在router的路由路径中使用“动态路径参数”来达到这个效果： const User = { template: '<div>User {{ this.$route.params.id }}</div>', ...
Vue-router动态匹配
wazj733的博客
05-11 406
动态路由
vue-router的动态路由匹配(路由组件传递参数）
爬楼梯的前端小白的博客
08-01 742
router与对应路由形成高度耦合 不够灵活 所以可以使用props将组件和路由解耦 路由组件传递参数有三种方式 props的值为布尔型 完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta .
Vue Router系列之动态路由匹配
老__L的博客
12-11 1424
动态路由匹配
Vue-动态路由匹配
世界和我们都不该止步于此
05-13 1052
目录 动态路由匹配操作 方法1：在Vue实例中逐层寻找 方法2：当前路由规则开启props传参，拿到动态参数值 动态路由匹配可以提高路由规则的复用性 什么意思呢？ 假如我们有很多的商品展示，每一个商品都需要有对应的详情展示页 难道我们要写上万个甚至更多的路由规则吗？ <!-- 假如现在有四个商品 --> <router-link to="/Move/1">商品1</router-link> <router-link to="/Move/2"&gt.
vue-router -- 动态路由匹配
骑着毛驴的小猴子
09-07 7722
一、概述 使用场景： 根据商品的id返回指定商品的详情页 匹配规则 模式 匹配路径 $route.params /user/:username /user/Jack {username=’Jack’} /user/:username/post/:post_id /user/Jack/post/123 {username=’Jack’,post_id=’123’} 二
vue-router：嵌套路由的使用方法
08-31
Vue Router 是 Vue.js 应用中的官方路由管理器，它允许你通过 URL 来控制页面的导航和组件的渲染。在本文中，我们将深入探讨如何使用 Vue Router 实现嵌套路由，这是一种创建复杂多层级导航结构的有效方式。 1. **...
vue-router为激活的路由设置样式操作
11-20
在`created`钩子函数中，我们检查当前路由路径是否匹配预定义的一组路径，如果匹配，则将`isActive`设为`true`，使得对应的`router-link`获得`link-active`类，从而显示激活样式。 总结一下，为Vue Router的激活...
vue-router:vue-router源码学习
03-23
5. **动态路由匹配** - `/:param` 或 `*` 用于匹配动态路径，允许我们在路径中传入动态参数。 - `params` 和 `query` 属性分别用于获取路径中的动态参数和查询字符串。 6. **导航链接** - `<router-link>` 和 ...
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文|使用缓存为Vue中的keep-alive类的react-router 。如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案...
详解Vue-Router源码分析路由实现原理
11-28
Vue-Router的核心在于它的路由匹配和组件渲染。当URL改变时，Vue-Router会根据当前URL找到匹配的路由，然后将对应的组件渲染到`<router-view>`中。这个过程涉及到Vue的组件树的更新和DOM操作。 Vue-Router的源码...
【Vue】路由中引入组件Component的三种方式
michiko98的博客
06-14 6398
vue 路由
vue3-动态路由问题（由后端返回路由进行拼接）
最新发布
Define_best的博客
02-19 853
vue3-动态路由问题（由后端返回路由进行拼接）
React-Router的动态加载实例与createElement
高山上的鱼
03-09 3822
1.我们首先看看下面的代码'use strict'; const chain = require('ramda/src/chain'); const toReactComponent = require('jsonml-to-react-component'); //jsonml-to-react-component const exist = require('exist.js'); const
Vue路由命名视图及路由组件切换
友人C君的博客
06-21 1642
本来一个页面里面只能有一个路由视图 对应 一个组件，现在可以多个路由视图（router-view） 对应 多个组件。 载入子页面 在routes中使用components属性，将组件名称及其组件对象包裹，由此可在页面中的router-view标签中添加name属性来对应路由组件，未定义name属性则默认填入default组件 在routes中使用children属性，并传入路由组件对象...
vue3动态路由实现
油墨香^-^的博客
08-08 575
在这个例子中，我们使用字符串拼接的方式来生成带有动态参数的链接，并通过。这样，您就可以在 Vue 3 中实现动态路由。若要生成带有动态参数的链接并进行页面跳转，可以使用。是一个占位符，表示一个动态的参数。来获取动态路由中传递的参数，并在组件中进行展示。在这个例子中，我们定义了一个动态路由。在要接收动态参数的组件中，可以通过。或者编程式导航进行页面跳转。在这个例子中，我们使用了。获取到动态传递的参数值。都会匹配到同一个组件。或者编程式导航（通过。组件，并且您可以通过。
vue-router的动态添加子路由的注意事项
weixin_47607451的博客
05-28 8741
vue-router的路由配置对象的复制问题addRoutes方法如何添加到子路由中去新增的路由对象如何和原路由合并如何判断动态添加的路由是否存在欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
TS简单介绍以及用法
热门推荐
tinglis的博客
09-28 1万+
TS是TypeScript的缩写，是JavaScript的超集 （JS有的TS都有），也可以说TS是 type + js，加了一个类型。let a = 0为什么需要给JS添加type呢？因为js的类型系统存在“先天缺陷”，JS代码中绝大部分的错误都是类型错误，那么就会存在一个问题，那就是找bug、改bug的时间增加，严重影响了开发效率。从编程语言的动静来区分；TS属于静态类型的编程语言，JS属于动态的编程语言。动态编程语言：执行期间做类型检查静态编程语言：编译期间做类型检查更早发现代码中的错误，
vue-router设置了动态路由后无法访问
01-12
vue-router 在设置动态路由时，需要确保路由的设置是正确的。动态路由是根据参数动态生成的路由，如果无法访问到页面，可能是因为参数传递不正确或者路由设置有误。 首先，需要检查动态路由的设置是否正确，包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值