vue的动态路由以及router-link

最新推荐文章于 2025-05-10 14:38:14 发布

原创最新推荐文章于 2025-05-10 14:38:14 发布 · 957 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何使用路由进行参数传递和接收的方法。从配置路由到使用v-for循环遍历数组，再到在组件中通过this.$route.params.id获取传递过来的参数，文章提供了实际操作步骤及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在router下的index.js文件中改相应路由

{path:'/index/indexDetails/:id',name:'Idetails',component:indexDetails}

然后

<div class="tex" v-for="t in arr">//arr是一个数组
            <router-link :to="'/index/indexDetails/'+t.artical_id">
跳转
            </router-link>
 </div>

然后在详情页面通过this.$route.params.id来获取

<router-link to="home">Home</router-link> //这种to的是字符串
<a href="home">Home</a>

<router-link :to="/home">Home</router-link>//这种:to=""的是路径

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

在白云寺外期待

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【vue2第十五章】VueRouter 路由配置(VueRouter)与使用和 router-link与router-view标签使用

weixin_72979483的博客

09-07

2523

Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。如何配置VueRouter 1. 下载vue-router因为它是一个单独的模块所以需要下载。 **vue2对应的vue-router版本是 vue-router3.x vue3对应的vue-router版本是 vue-router4.x** 使用npm下载：`npm install vue-router

vue 嵌套路由，router-link-active的问题

Missbelover的博客

11-17

2088

效果在点击主路由的时候，会有一个active的样式但是在点击了子路由之后：一开始我是用vue里面router-link-exact-active来做的在子路由点击的时候，要保证此时当前的激活路由还处于active状态，显然如果用router-link-exact-active 来做的话，就不能实现了。即在你点击子路由的时候，主路由的active样式就消失了， router-link-...

参与评论您还未登录，请先登录后发表或查看评论

vue: router-link 动态路由

u012872771的博客

09-12

1521

动态路由: 根据路由的不同请求不同的数据。 $router 获取vue-router实例 $route 获取url的详细信息 :id表示在user后任意参数都可以访问到对应组件，但是必须有" / "。如: loc...

Vue.js路由 -- 动态路由

优快云_GMC的博客

05-31

709

vue-router 文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params 动态路由有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理 ... { path: '/item/:itemId', nam

vue中v-for循环生成router-link

刘旭的博客

04-27

2035

HTML部分 <ul> <li v-for="(item,index) in list"> <router-link :to="item.link">{{item.title}}</router-link></li> </ul> 数据部分 list:[ {title:'首页',link:'/'}, {title:'关于本站',link:'/About'

vue v-for循环生成router-link，含可用路由

热门推荐

ColourfulTiger的博客

06-05

1万+

接着上一篇的内容，使用循环来完成router-link的生成，并可以实现界面的路由（1）html部分实现循环对路由的配置核心：对路径的配置，红色部分。<p v-for="(operate,path,index) in navTo.operate" class="nav" @click="change(index)"> <router-link :to="{ path: opera...

v-for遍历router-link 实现导航跳转

daddykei的博客

07-29

1734

<template> <div class="box"> 联系我们 <div class="dot_nav"> <div class="dot" v-for="(operate,path,index) in navTo.operate" @click="change(index)" :class="{ bgColors:index==current}"> <router-link :to="{ pa.

Vue 页面跳转不用router-link的实现代码

08-27

Vue 页面跳转不用 router-link 的...本文介绍了 Vue 页面跳转不用 router-link 的实现代码，包括使用 v-if 指令控制页面显示和隐藏、使用数据绑定控制页面显示和隐藏，以及使用 router-link 跳转传值示例实现页面跳转。

vue路由遍历生成复数router-link的例子

10-16

在本篇关于Vue路由的文章中，我们了解到在使用Vue CLI创建单页面应用（SPA）时，经常会需要顶部导航栏来控制下方内容栏的页面内切换，这就需要用到Vue-router，它是Vue.js的一个插件，用于构建SPA。首先，要使用...

详谈vue中router-link和传统a链接的区别

10-15

`<router-link>` 是Vue Router提供的一个组件，用于在应用中实现平滑的导航。下面将详细探讨这两者的差异。首先，`<router-link>` 在HTML5 history 模式和hash模式下表现一致，这意味着不论你选择哪种路由模式，`...

vue 实现动态路由的方法

11-19

很多时候我们在项目的路由都是在前端配置好的但是有的时候为了进行全面的权限控制，会需要后台给出路由表，前端再渲染。不用在前端配置。下面主要讲一下思路 1、和后台小哥哥沟通好数据，把我们前端配置的路由表数据给他，他就能看懂了 2、拿到数据需要我们自己再处理路由中的component后台是给不了的，这里我们只需要后台小哥哥按照我们提供的前端component路径给数据，我们循环加载就可以了 //view就是后台给的数据 return () => import(`@/view/modules/${view}`); 这样我们就拿到了最重要的数据，即component。 3、把后台提供的数据处

v-for和router-link的共同使用

日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导

03-20

1049

1、错误例子 <div style="color: red" v-for="item in pressionList" :key="item.name"> <router-link style="color: white" :to="{path:item.path}">{{item.name}}</router-link> </div> 2、修改后 <div style="color: red" v-for=

v-for的终极用法（配合路由使用）

weixin_41556165的博客

01-17

1245

:key是为vue的响应式渲染提供方法，在列表中单条数据改变的情况下，可以进行单独渲染，减少页面资源消耗。当前页面如果有列表渲染v-for，并且在v-for的循环标签中没有:key元素时，控制台会出现警告. 在页面标签中使用 <ul class="letter_classify"> <li v-for="(value, key, index) in sortgroupc...

vue项目——路由传参与router-link传参多种方式详解

qq_40556950的博客

10-30

1017

最近项目中涉及到跨页面传参数和后台进行数据交互，经过多方搜索参考决定用路由传参来解决。 Vue中给我们提供了三种路由传参方式，：方法一：params传参（只能由name引入） 1.params传参、使用name： this.$router.push({ name:"Check",　 params:{id:item.id, num:item.num} }...

路由原理及vue实现动态路由

qq_39321234的博客

05-19

4429

总之，Vue Router 提供了丰富的 API，可以轻松地实现路由功能，并支持路由参数、查询参数、命名路由、嵌套路由等功能，可以满足不同应用程序的需求。除了使用路由参数和查询参数来实现动态路由，Vue Router 还支持使用命名路由来实现动态路由。在前端框架中，例如 Vue，路由通常是通过路由库来实现的。在 Vue Router 中，路由配置还可以包括路由参数和查询参数，用于实现动态路由。当用户访问不同的 URL 时，Vue Router 会根据路由配置，找到对应的组件，并将其渲染到页面中。

Vue路由(router-link)——高亮、动态传参

m0_53951384的博客

11-07

6997

router-link的两个高亮类名太长了，我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）

VUE动态路由

qq_41164527的博客

03-18

1326

vue动态路由的几种方式

Vue——路由：动态路由

weixin_63215361的博客

05-10

1383

定义动态路径 /user/:id。：通过 < router-link> 跳转到不同用户的路径（如 /user/1、/user/2）。：接收并渲染动态参数 id。

Vue的router详解

Litt_White的博客

08-20

1万+

vue-router参数配置，vue-router的相对路径和绝对路径，带/和不带/的区别，vue-router路由的嵌套使用，vue-router的路由传参，keep-alive的使用，vue-router动态添加路由，删除路由，vue-router导航守卫的使用

vue-router的router-link源码解析