vue --- > 使用vue-router获取带参数的路由

最新推荐文章于 2024-09-23 19:38:33 发布

栗子好好吃

最新推荐文章于 2024-09-23 19:38:33 发布

阅读量1.4k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/piano9425/article/details/101013240

版权

本文介绍了如何在Vue应用中使用vue-router传递参数。通过router-link设置带参数的路由，然后在router.js配置相应的处理函数和组件。在组件内部，利用$route.params.id获取并显示传递的id参数。

摘要由CSDN通过智能技术生成

希望的效果如下:

在这里插入图片描述

2个路由: 点击如下

步骤.

使用 router-link 来指定路由路径
在router.js中指定路径的事件处理函数(对应的组件)
创建对应的组件

router-link

找到一个区别各个列表的属性(id),将其作为参数传递到路由中
to是vue-router中用来绑定路由的属性
由于需要进行计算(path + id),故需要将to改为 :to

// NewsList.vue
<router-link :to=" '/home/newsinfo/' + item.id ">
    <img class="mui-media-object mui-pull-left" :src="item.img_url">
        <div class="mui-media-body">
            <h1> {
  { i

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

栗子好好吃

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue-router路由参数刷新消失的问题解决方法

08-30

vue-router路由参数刷新消失的问题解决方法路由参数刷新消失的问题解决方法是 vue-router 中常见的问题，本篇文章将为您提供四种解决方案。解决方案一：Session & 服务器渲染传统的解决方案是使用 Session 和...

vue.js中使用vue-router路由功能之created生命周期钩子方法和watch侦听器属性，keep-alive介绍

水月灯花的博客

07-28

1045

一、路由之生命周期created钩子方法和watch侦听器 1、如果只是在同一个组件中，使用路由功能，例如在同一个路由地址，只是传递的参数不同， /list?status=doing /list?status=finish 只是status状态不同，/list?status=doing 导航到/list?status=finish，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。因此生命周期函数无法再次被执行.

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

09-Vue生命周期

码字不易，大家的支持就是我坚持下去的动力

11-29

956

Vue生命周期 📋前言📋💝博客：【无聊大侠hello word】💝✍有一点思考，有一点想法，有一点理性！✍✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍mounted、另外还有一些其他和路由相关的生命周期钩子。销毁后借助Vue开发者工具看不到任何信息销毁后自定义事件会失效，但是之前通过v-bind绑定的原生DOM事件（on-click等）依然有效一般不会在中操作护具，因为即使操作数据，也不会再触发更新流程了。先赞后看，养成习惯！！！码字不易，大家的支持就是我的坚持下去的动力。

Vue使用Vue Router路由：通过URL传递与获取参数

最新发布

pan_junbiao的博客

09-23

1609

Vue Router 路由实际上就是一种映射关系。例如，多个选项卡之间的切换就可以使用路由功能来实现。在切换时，根据鼠标的点击事件显示不同的页面内容，这相当于事件和事件处理程序之间的映射关系。在实际的开发中，经常需要通过URL来传递参数，同时在 JavaScript 脚本中需要获取URL中的参数。

Vue_路由配置&路由数据获取

08-20

3506

const routes = [ { path: '/a/b/c/d/e/f', // 这个匹配到的就是 host#/a/b/c/d/e/f }, { path: '/', // / }, { path: '/demo' // /demo }, { path: '/demo/:id' // /demo/任意值 }, { path: ...

vue路由传参，query,params(学习篇)

skyblue_afan的博客

06-28

695

1、params传参 params传参，要是用name进行匹配，如果使用path接收不到传递的参数 this.$router.push({ name: "attributeAdd", params: this.optionsStatus, }); 接收参数，可以在created钩子函数中接受参数 created() { console.log(this.$route.params, "ssss"); }, 控制台打印效果

注意避坑，Vue Router 4: 路由参数在 created/setup 时不可用

粉丝们务必加入微信粉丝群

06-07

1050

你的可能已经注意到，VUE 3版本的 Vue router (4.0) 与其之前的版本有一些 breaking change 更改。大部分的 Vue Router API 都没有变化，而且迁移过程也非常直接。然而，一个非常不明显但重要的变化常常被忽视，它可能导致难以调试的行为。现在所有的导航都是异步的。如果你想知道为什么 URL中的查询参数在你的方法或钩子中无处可寻，但当插入它们时，它们仍然出现在模板中，不要离开，我们来一探究竟。为了探索这一点，我们将使用一个已经安装了Vue router 4

浅谈vue-router2路由参数注意的问题

11-27

1、vue 路由如果传递 params 定义路由的时候是 /路由名称：id 获取的时候 ...以上这篇浅谈vue-router2路由参数注意的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多

基于vue-router 多级路由redirect 重定向的问题

10-18

在 vue-router 中，可以在模板中使用 <router-link> 标签进行导航，并通过 :to 属性传递参数。如果直接在 <router-link> 标签中传参存在问题，可以使用编程式导航，即通过 this.$router.push 方法来跳转页面，并传递...

Vue-Router的使用方法

12-11

使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...

Vue两个取路由参数的方法

uciiiii的博客

06-11

2585

a、通过在路由上添加key/value串使用this.$route.query来取参数，例如： /router1?id=123 /router1?id=456 通过this.$route.query.id获取参数id的值。 b、通过将参数作为路由一部分进行传参数使用this.$route.params来获取，例如： /router1/:id /router1/123 通过this.$route.p...

vue路由传参方法两篇

az44yao的专栏

03-08

356

第一篇 1.标签 <li v-for=" el in hotLins" > <router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}"> <img :src="el.image_list[0]"> <h3>{{el.tourism_name}...

Vue（路由机制）

qq_48108860的博客

04-11

2711

目录安装使用重定向 path和redirect实现重定向 name（大名）和redirect实现重定向动态路由匹配想对路由参数的变化作出响应的话，可以使用监听器或路由守卫嵌套路由编程式导航编程式导航，可以使用path-query传参、name-params传参和name-query传参路由模式 hash模式 history模式 hash路由和history路由的区别：导航守卫全局守卫（全局前置守卫、全局后置守卫）路由独享守卫组件内的守卫面试题

关于vue里路由的参数传递

weixin_45335308的博客

07-06

192

在vue里，可以通过url获取地址中的参数主要有两种形式第一种形式：以查询字符串的形式传参 <router-link to="/login?name=zs&age=88" tag="span">登录</router-link> 在页面一打开，我们就可以通过$route.query获取参数 created(){ console.log(this.$route...

APP.vue获取this.$route问题

zwbHUST的博客

09-02

3421

在项目中偶然间遇到了这样的问题，routes注册设置的时候使用了懒加载的方式，如下： routes: [ { path: '/', name: 'index', // component: index //方式1 component: () => import('./views/index.vue'); //方式2 }, ... ] 如果是这种方式（方式2），那么在app.vue中你如果先要在 created 或者

vue - vue中使用this.$route.params获取不到参数的原因

qq_43886365的博客

11-17

1万+

如果想要this.$route.params 获取到this.$route.push()传的参数，一定要使用name属性来指定路由不要用path属性；

Vue基础/生命周期/路由

ZQD的博客

09-25

680

文章目录Vue基础知识点：生命周期：过滤器路由 vue-router前端路由核心：ui-router：vue中： Vue基础知识点： 1:全局的代表Vue.的 2:实例的代表this.或者new Vue(). 3:选项代表new Vue()的参数或者export default里边的属性 生命周期： 生命周期函数就是vue实例在某个时间点会自动执行的函数 beforeCreate created...

vue获取URL中的参数