vue 动态路由匹配

最新推荐文章于 2024-05-16 11:26:16 发布
最新推荐文章于 2024-05-16 11:26:16 发布
阅读量1.2k 收藏 4
点赞数 3
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34402285/article/details/106921906
版权

解决的问题:

    需要把匹配某种模式的路由映射到同一个组件，例如有一个Book组件，对于所有ID各不相同的图书，都使用这个组件来渲染，这就可以使用路径中的动态段来实现。动态段使用冒号（：）标记，如/book/:id,即/book/1,/book/2,和/book/foo都将映射到相同的路由。当匹配到一个路由时，动态段的值将被保存到this.$route.params(this.$route代表当前路由对象)中，可以在组件内使用。

需要先安装vue-router插件：

  代码示例：

App.vue:

components/Books.vue:

router/index.js:

main.js:

结果：

查询参数

    如果URL中带有查询参数的形式/book?id=1,需要把导航链接中to的属性值修改为“/book?id=1”，然后把components/Books.vue下的$route.params.id 修改为$route.query.id， 最后把router/index.js 下的path:'/books/:id' 修改为path:'/book'

 

jsuWangMin
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue动态路由配置
weixin_43493217的博客
06-09 878
1.登陆成功后获取菜单列表，存入store缓存 2.获取缓存后将菜单列表修改为自己所需格式 // eslint-disable-next-line import api from '@/api' // eslint-disable-next-line import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts' import boolean from 'less/lib/less/functi
vue-router 动态路由匹配
qq_41700374的博客
11-02 575
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在router的路由路径中使用“动态路径参数”来达到这个效果： const User = { template: '<div>User {{ this.$route.params.id }}</div>', ...
Vue路由篇之动态路由匹配
01-08
Vue路由篇之动态路由匹配 详情请见注释 .active{ font-size: 100px; color:red } 前端研发 职位 搜索 const position={//定义局部组件 template:` position ` } const search={
带参数的动态路由匹配
weixin_48294709的博客
05-26 530
有的时候，一个user组件，它应该对所有用户进行渲染，但是用户ID不同。所以可以用一个动态字段来实现，称为 路径参数： 动态路由有两种匹配方式： 方法一：使用{{$route.params.id}}传递动态参数 如图：实现的页面效果 当然，也可以在同一个路由中设置多个路径参数，它们都会映射到$route.params上的相应字段 匹配模式 匹配路径 $route.params /users/:username /users/eduardo { userna.
Vue-Router入门-掌握基础知识_vue router中,( )标签将路由匹配到的组件渲染在这里。
最新发布
2401_84434301的博客
05-16 276
/ 每个路由应该映射一个组件。// UserProfile 会被渲染在 User 的 中。// 当 /user/:id/profile 匹配成功，// UserPosts 会被渲染在 User 的 中。// 记得要通过 router 配置参数注入路由，// 当 /user/:id/posts 匹配成功。// 3. 创建 router 实例，然后传。// 匹配以 ‘/user-’ 开头的任意路径。// 4. 创建和挂载根实例。// 动态路径参数 以冒号开头。// 现在，应用已经启动了！
动态路由匹配 (多个路由映射一个组件) 参数设置 参数获取
kjs--的博客
04-16 1230
动态路由匹配 动态路由的必要性 我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。 如果我们一个一个定义路由规则的话也是可以的 但是路由规则的复用性就会变得很差 例如，我们有一个 User组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。 那么，我们可以在vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果： const User = { template: '<div>User</div>' } con
Vue Router系列之动态路由匹配
老__L的博客
12-11 1418
动态路由匹配
vue-router 路由跳转、带参动态路由匹配、404路由和嵌套路由
g841805的博客
03-19 1044
核心代码全部代码常量路由home.vueabout.vueabout1.vue效果homeaboutabout1404。
vue动态路由实现demo
02-09
这里，`/user/:userId`是动态路由，`UserProfile.vue`是与该路由匹配时加载的组件。 5. **获取动态参数** 在组件内部，可以通过`this.$route.params`访问动态参数。例如，我们可以获取`userId`： ```javascript ...
详解vue路由篇(动态路由、路由嵌套)
10-17
在实际应用中，当访问'/users/123'这样的URL时，Vue Router会首先匹配到'users'路由，然后根据':userId'匹配到具体的用户ID，渲染对应的User组件。嵌套路由允许我们在同一父级路由下组织多个相关的子页面，使结构...
VUE+elementui面包屑实现动态路由详解
10-16
在这个例子中，面包屑组件名为`Navbar`，并包含一个`levelList`数据属性，用于存储当前路由匹配到的层次结构。 `watch`对象监听`$route`的变化，这意味着每当路由改变时，`getBreadcrumb`方法会被调用。`created`...
Vue 动态添加路由及生成菜单的方法示例
10-16
注意，如果你有一个全局的 404 路由（匹配所有未定义的路径），它应该被放置在所有其他路由的最后，以防止在添加动态路由时意外重定向到 404 页面。 接下来，我们探讨如何动态生成菜单。通常，我们会从后端获取用户...
vue不同参数跳转同一路由，复用同一组件，动态路由实现
illusionGD的博客
08-27 3162
问题描述 有时候需要跳转同一个路由（或者复用同一组件），但是vue是不能实现同路由跳转的，但可以用其他方法实现需求，这里用作品页面案例举例。 需求 看图 实现 使用vue router的动态路由匹配，官方文档：动态路由匹配 代码 router文件中的路由设置，具体看官方文档 { path: '/work_exhibition/:workId', name: 'WorkExhibition', component: () => import('@/pages/WorkExh
Vue 中路由传参（动态路由匹配）
Tianxiaoxixi的博客
07-04 1218
Vue 中路由传参（动态路由匹配）
vue-router的动态路由匹配(路由组件传递参数）
爬楼梯的前端小白的博客
08-01 736
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基础（二）动态路由匹配
hrbsfdxzhq01的博客
02-15 749
我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果  const User = { template: '&lt;div&gt;User&lt;/div&gt;' } const router = new VueRouter({ ...
【Vue Router】动态路由匹配
richest_qi的博客
07-13 677
文章目录新建项目并改造项目第一种：使用 路由参数 时的路由匹配第二种：使用 URL查询参数 时的路由匹配 新建项目并改造项目 首先使用vue-cli新建一个项目。 然后对该项目进行改造，改造后的目录如下。 第一种：使用 路由参数 时的路由匹配 src\App.vue <template> <div id="nav"> <router-link to="/">首页</router-link> | <router-link to=
关于vue路由携带不同参数跳转同一个页面路由页面复用解决记录
Anlittlecat的博客
12-15 1992
【代码】关于vue路由携带不同参数跳转同一个页面路由页面复用解决记录。
Vue Router--动态路由匹配
xiaoerduo123x的博客
12-04 1471
1.带参数的动态路由匹配 很多时候，我们需要将给定的匹配模式的路由映射到同一个组件。 const routes = [ // 动态段以冒号开始 { path: '/users/:id', component: User }, ] 例如/users/zwl和/users/zwf这样的的URL都会映射到同一个路由。当一个路由被匹配时，它的params的值将在每个组件中通过this.$route.params的形式暴露出来。它也可以匹配多个参数 /users/:username/pos...
vue动态路由
06-02
Vue动态路由是一种根据参数动态匹配URL路径的技术，它使得我们可以根据不同的参数值展示不同的内容。在Vue中，我们可以使用路由参数来定义动态路由，比如： ``` { path: '/users/:id', component: User, props: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值