vue-router之动态路由

最新推荐文章于 2024-04-30 12:42:22 发布
最新推荐文章于 2024-04-30 12:42:22 发布
阅读量406 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_123456___/article/details/120252366
版权

vue-router的动态路由设计

需求

点击A页面进入B页面查详情，A页面传id过去

设想

使用vue动态路由实现

实现步骤

A页面跳转函数,传id过去给B页面

handleToDetail(id){
  this.$router.push({name:'detail',params:{id: id}})
}

B页面路由设置

{
  name:'detail',
  path:'/detail/:id', //后面的:id是重点
  component: Detail,
},

最后B页面的路由就是/detail/id
A页面的params的key值传的是什么，路由里面的:后面跟的就是什么

hjt_未来可期
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router单页面路由
12-07
vue中，有一个类库叫做vue-router，是用来做单页面路由的。做路由一般分为四个步骤： 准备一个根组件　　vue.extend()； 需要做路由的内容准备 　　template； 准备路由 new VueRouter（）； 关联路由   map 启动路由 start(App,’#box’)；//第一个参数是准备的根组件，第二个参数是要捆绑的位置就是自己定义的id中 github上vue-router下载地址：https://github.com/vuejs/vue-router 关于路由跳转的简单代码如下： <!DOCTYPE html> <html> <hea
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
vue关于静态路由和动态路由：
weixin_48123820的博客
05-23 2888
这篇文章写得超详细！！！👇。
Vue Router 动态路由
最新发布
qq_40930841的博客
04-30 1140
动态路由是一种路径不固定的路由，路径中可变的部分被称为动态路径参数），使用动态路径参数可以提高路由规则的可复用性。在VueRouter的路由路径中，使用“参数名”的方式可以在路径中定义动态路径参数。:id', component: 组件 }]其中:id是动态路径参数，id为参数名。（注意：不同动态路径参数的动态路由在进行切换时，由于它们都是指向同一组件，所以Vue不会销毁再重新创建这个组件，而是复用这个组件。
vue-router 使用，添加动态路由，以及报错问题
一切都不太晚
11-20 2287
在使用vue3 的小伙伴，在使用vue3 时候必须使用vue-router4，我最近在使用这个时候异常恼火，因为报错[Vue Router warn]: No match found for location with path "xxx" 解决了好几天，才玩明白，话不多说我们一步一步来， 采用静态路由和动态路由结合，来解决这个问题
vue_router 动态路由
weixin_30580943的博客
08-20 196
配置子路由： 　　　　　　 路由的视图都需要使用view-router 子路由也可以嵌套路由使用： children来做嵌套如上图 使用location.页面name就可以做页面跳转 mounted：挂载，延迟跳转：setTimeout（function（）{}，10000） 页面跳转的方式 内容链接：https://router.vuejs.org/gui...
Vue Router实现动态路由
weixin_34161064的博客
04-26 208
根据输入的路径的不同动态显示内容第一步修改router.jsimport Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ routes: [ { path: '/', redirect: '/ebook' }, ...
vue-router 动态路由
Y2730415540的博客
10-05 226
vue-router 文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params 动态路由 有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理 ... { path: '/item/:itemId', nam
vue-router动态路由实现方式（一）
chenyongzhi1218的专栏
11-27 870
vue-router动态路由 在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： /user/aaaa或/user/bbbb 除了有前面的/user之外，后面还跟上了用户的ID 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。 ...
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue-router 嵌套路由没反应的问题
10-14
主要介绍了解决vue-router 嵌套路由没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
Vue(五)——vue-router(动态路由)_显示商品详情页
黎小小的博客
01-29 3948
动态路由 有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理 ... { path: '/item/:itemId', name: 'item', component: Item } ... 其中 :itemId 表示匹配的 url 中动态.
vue 动态路由实现
huangruifeng的博客
06-04 7379
vue开发中，第二个问题就是实现动态路由，根据后端权限配置获取对应的路由，最终生成对应的菜单。如下： 1、菜单接口返回结果的数据结构 [{ "url": "/system", "code": "sysmng", "name": "系统管理", "icon": "system", "children": [{ "url": "menu", "code": "sysmenumng",...
vue-router动态路由实践
热门推荐
Bennett_G博客
01-09 2万+
vue动态路由 vuex 路由数据(demo) 贡献本人于服务端约定的路由数据结构，仅供参考
vue 循环_vue踩坑01：vue-router路由循环时遇见的问题
weixin_39616674的博客
11-23 422
在设计路由的时候，会在路由循环时，根据某些状态，来判断页面后续应该如何跳转。常见的例子，就是登陆时，判断用户是否已经登录，再决定是跳转到用户的目标页面，还是返回到登录页。 常见的设计是这样的：router.beforeEach((to, from, next) => { if (判断用户是否登录) { next() } else { if...
【Vue.js】路由基础-动态路由、嵌套路由、编程式导航、重定向
LuWeien的博客
03-02 7108
当我们点击outer-link的时候路由就发生改变了，然后就会去路由表里面找对映的是哪个path，找到对应的path就去找对应的组件，将对应的组件放入router-view里面。这里的vue3是通过CDN方式引入, 由于地址在国外可能会比较慢, 可以将代码复制到本地去引入, 注意这个网站有的cdn使用不了(可以往下找使用旧一点版本)这个网站里面有大量的国内镜像资源, cdn是内容分发网络, 可以进入网站直接复制链接浏览器打开将源码复制下来在本地使用, 和vue的本地引入是一样的道理。
如何定义vue-router的动态路由
04-10
要定义vue-router的动态路由可以使用$route.params对象来接收动态参数，可以在定义路由时使用冒号来定义动态部分。例如： ```javascript const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] }) ``` 在上述示例中，我们定义了一个名为'user'的路由，路径为'/user/:userId'，其中':userId'表示这部分是动态路由参数。在组件中可以按照以下方式访问这个参数： ```javascript this.$route.params.userId ``` 这样就可以获取动态路由参数的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值