Vue-进阶-08-动态路由的使用

最新推荐文章于 2024-09-12 19:34:30 发布
最新推荐文章于 2024-09-12 19:34:30 发布
阅读量349 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45438044/article/details/122139796
版权
本文介绍了Vue Router中动态路由的配置以及如何通过props进行参数传递。首先讲解了基本的动态路由设置，然后详细探讨了props在不同场景下的使用，包括直接传参、对象传参和函数传参，以及它们在组件间数据交互中的应用。
摘要由CSDN通过智能技术生成

1、1 动态路由：

<!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 = {
        // params 不够灵活
        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>

1、2 页面：
在这里插入图片描述

2、1 使用 props 进行传参：

<!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'],
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
      }

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

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          // 推荐传参使用 props
          //如果props设置为true，route.params将会被设置为组件属性
          { 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>

2、2 页面：
在这里插入图片描述

3、1 props 传参对象：

<!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 = {
        // 此时由于 对象中无id值，故 id值无法访问
        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'},
          // props 还可以被指定为一个参数对象
          { 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>

3、2 页面：
在这里插入图片描述
4、1 props传参函数

<!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', '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 值为函数类型
            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>

4、2 页面：
在这里插入图片描述

EchoByCode
关注
专栏目录
vue动态路由
qq_44162778的博客
12-13 1086
需要用到方法：router.addRoute（） 注：addRoutes被废弃了 代码如下： router.beforeEach((to, form, next) => { if(to.path ==="/login"){ return next("/") }else{ if(!hasRoute(to)){//判断是否已经拉取了路由信息 store.dispatch('DYNAMICROUTERS',{}).then(res=>{//接口 if
Vue-进阶-06-路由的使用
Echo
12-25 84
1、1 模拟路由的基本使用 <!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" /&g
vue-router-动态路由的使用
vfjcgg的博客
06-29 522
vue-router-动态路由的使用 动态路由 在某些情况下，一个页面中的path路径可能是不确定的，比如我们进入用户界面时，希望是如下路径： / user /aaa 或 / user /bbb 除了有前面的/user之外，后面还跟上了用户的ID 这种path和component的匹配关系，我们称之为动态路由（也就是路由传递数据的一种方式） 配置路由映射关系之前要先将组件导入 index.js文件中配置的路由： { path:'/user/:userId', component:User
前端单独实现 vue 动态路由
最新发布
a123456234的博客
09-12 1267
在用户登录成功后从服务器获取用户的权限信息，在 vuex 的异步处理函数中过滤掉角色权限不存在的路由，使用concat()合并公共路由，最后使用动态添加可访问的路由。这样可以确保应用根据用户的权限动态加载相应的路由，增强安全性与灵活性。
Vue动态路由的使用
尘生杜若
01-23 5477
动态路由是什么? 一般我们使用vue-router配置路由时，都是直接配置固定的路径 而动态路由是我们可以在 vue-router 的路由路径中使用“动态路径参数” 让路径不再是固定的。 动态路由的使用场景是什么？ 比如在写一个商品详情页面的时候，我们的页面结构都一样，只是渲染的数据不同而已，这时候就可以根据商品的不同id去设置动态路由，只需要写一个组件，就可以把每个商品的商品详情映射到同一个组件...
Vue系列vue-router的动态路由使用（二）
DT辰白
07-23 1875
前言 首先我们来看看官方文档上是怎么解释动态路由的？走你 你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如： 除了 $ route.params 外，$ route 对象还提供了其它有用的信息，例如，$ route.query (如果 URL 中有查询参数)、$ route.hash 等等。你可以查看 API 文档 的详细说明。 一、什么场景下使用动态路由呢？ 比如在写用户详情页面的时候，页面结构都一样，只是用户id的不同，所以这个时候就可以用动态路由动
vue动态路由操作
m0_73481765的博客
07-02 731
Vue动态路由操作指的是在Vue应用中根据不同的参数，动态生成相应的路由。一般来说，我们可以使用Vue的路由插件vue-router来实现动态路由操作。以上是一个简单的动态路由操作示例，可以通过参数来动态生成路由，并在组件中获取和使用这些参数。
vue-基础-进阶-111
02-01
7. **路由管理**：对于单页应用（SPA），Vue Router是官方推荐的路由库，它允许我们定义和管理页面路由，实现页面间的平滑过渡。 8. **状态管理**：随着应用复杂度增加，状态管理变得尤为重要。Vuex是一个专为Vue...
Vue-Router进阶之滚动行为详解
08-29
Vue-Router进阶之滚动行为详解是一篇关于Vue-Router的高级滚动行为的文章，介绍了如何使用Vue-Router实现滚动行为的自定义。在这篇文章中，我们将探讨滚动行为的实现方式、scrollBehavior方法的使用、savedPosition...
Vue学习笔记进阶篇之vue-router安装及使用方法
12-03
在实际开发中，还可以使用 Vue Router 的高级功能，比如嵌套路由、动态路由匹配、路由守卫等，以满足复杂的应用场景需求。 总的来说，Vue Router 是 Vue.js 应用不可或缺的一部分，它提供了强大的路由管理功能，让...
Vue Router 动态路由
qq_40930841的博客
04-30 3438
动态路由是一种路径不固定的路由，路径中可变的部分被称为动态路径参数），使用动态路径参数可以提高路由规则的可复用性。在VueRouter的路由路径中，使用“参数名”的方式可以在路径中定义动态路径参数。:id', component: 组件 }]其中:id是动态路径参数，id为参数名。（注意：不同动态路径参数的动态路由在进行切换时，由于它们都是指向同一组件，所以Vue不会销毁再重新创建这个组件，而是复用这个组件。
Vue实现动态路由
无所谓^_^博客
03-23 1万+
动态添加路由。说着好像很简单，但看了很多教程，也跟着教程写了很多代码，但最后都跑不通（很多原因，比如：版本问题，教程没有全部代码，只有核心代码片段等）。😭😭😭所以，我只能狠下心，写下这篇博客，方便自己总结，也为了避免大家踩坑。废话不多说，
Vue 动态路由
热门推荐
℡メ㏑╭ァ小凯
07-29 1万+
3、router.beforeEach里面判断是否登录，且store对象里面的值是否为空，然后直接重新去localstore再绑定一次路由，调用next({...to,replacetrue});2、动态集成路由componentName()=>import(`@/pages/${view}`)2、登录后把数据库的菜单调用router.addRoute加到路由中，然后把菜单存本地localstore。1、定义一个store对象，这个是vue里面的全局对象，刷新后值会丢失。...
Vue.js路由 -- 动态路由
CSDN_GMC的博客
05-31 658
vue-router 文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params 动态路由 有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理 ... { path: '/item/:itemId', nam
Vue动态路由
林中明月间丶
01-05 780
vue项目实现动态路由的方式大体可分为两种: 前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由) 详情可参阅花裤衩大佬的项目手把手…,我当时看这个项目看了好久才明白一点逻辑， 因为大神的动态路由那里有好多层判断，并且穿插各种vuex，把小白的我都快搞懵逼了，对我启发很大，也正是这篇文章，给我提供了很多逻辑 后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由) 今天我们来讲讲用后台传递路由表实现动态路由的思路，因为公司的项目里路有部
Vue进阶：vue-router安装与基本使用指南
"Vue学习笔记进阶篇之vue-router安装及使用方法，介绍vue-router作为Vue.js官方的路由插件，用于构建单页面应用，通过路由和组件实现页面切换。安装vue-router需在项目目录中运行`npm install vue-router --save`。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值