Vue 列表页带参数进详情页的操作(router-link)

首先，仔细看文档！！！一点一点的踩坑过来的~~~

这里介绍params和query两种方法

1.用params传参

列表页：

<router-link :to="{ name:'msgDetail', params: {id: item.msg_id} }">（注意：用params传参这里是命名路由，用name）

</router-link>

路由配置如下：

export default new Router({
routes: [
 {
 path: '/msgDetail/:id',
 name: 'msgDetail',
 component: msgDetail
 }
]

详情页接收参数：

this.$route.params.id（注意：这里是$route，而不是$router）

2.用query传参

列表组件：

<router-link :to="{ path: '/msgDetail', query: {id: item.msg_id} }">（注意：用query传参这里是带查询参数，用path）

</router-link>

路由配置如下：

export default new Router({
routes: [
 {
 path: '/msgDetail',
 name: 'msgDetail',
 component: msgDetail
 }
]

详情页接收参数：

this.$route.query.id（注意：这里是$route，而不是$router）

补充知识：vue+element解决点击table列表的从详情或修改页面跳转路由到列表页总是跳转到第一页，而不能跳转到当前页的问题

思路：

将当前页的页码currentPage存入session，然后点击详情跳转到详情页面，然后，再次返回当前页的时候，在created生命周期里，获取到存储的currentPage，再进行加载

以上这篇Vue 列表页带参数进详情页的操作(router-link)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • vue router导航守卫（router.beforeEach()）的使用详解

    导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫.) 好久没写一些东西了,总是感觉有啥缺少的.~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等.废话不多说了

  • vue-router跳转时打开新页面的两种方法

    最近还是在痛苦的挣扎中 挣扎吧 记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持

  • 详解vue-router的导航钩子(导航守卫)

    在做vue项目的时候,要求用户在页面访问前先登录,或在离开页面前发出提醒.vue官方提供的路由管理器 vue-router 提供的导航钩子,通过跳转或取消的方式守卫导航.以下总结了路由钩子函数的使用方法和一些使用场景. 一.全局守卫 router.beforeEach 路由改变前的钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中: to:将要访问的路径 fr

  • Vue 列表页带参数进详情页的操作(router-link)

    首先,仔细看文档!!!一点一点的踩坑过来的~~~ 这里介绍params和query两种方法 1.用params传参 列表页: <router-link :to="{ name:'msgDetail', params: {id: item.msg_id} }">(注意:用params传参这里是命名路由,用name) </router-link> 路由配置如下: export default new Router({ routes: [ { path: '/msgD

  • jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法

    jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法

    效果: json文件: { "books":[ {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"论语","publish":"人民文学出版社","num":"303","desc":

  • 微信小程序点击列表跳转到对应详情页过程解析

    微信小程序点击列表跳转到对应详情页过程解析

    这篇文章主要介绍了微信小程序点击列表跳转到对应详情页过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 点击列表跳转到对应详情页: 用自定义属性data-index保存当前点击列表的index,在点击跳转的方法中获取index并且拼接到要跳转的路径后面: 跳转到详情页,在onLoad钩子中通过参数options获取传过来的index,渲染对应的数据 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • vue 列表页跳转详情页获取id以及详情页通过id获取数据

    1.先在router.js中配置路由 { path: '/movieDetail/:movieId', name: 'movieDetail', component:movieDetail } 2.获取详情页的id,并派发父组件事件(movieList.vue)页面 <li v-for="(item,index) in movies" :key="index" @click="selectItem(item)"> ....... &l

  • vue如何通过id从列表页跳转到对应的详情页

    1. 列表页:列表页带id跳转到详情页 详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题 列表页:带id和页面标题的typeid跳转到详情页 详情页:在html绑定标题,获取到传过来的typeid,然后判断typeid是多少对应返回标题. 补充:获取后台的数据,就是去访问的后台的服务器(怎么访问?答:就是你怎么访问网站那样子)然后他有定义到是必须的参数的时候,就是在连接后必须带的参数,才可以获取到后台数据,不是必须的跟在连接后面也不会影响.就如我的第二个例子,

  • 解决vue做详情页跳转的时候使用created方法 数据不会更新问题

    大家在做项目的时候肯定会遇到携带某个参数跳转到详情页 然后取这个参数,下面是重点 刚开始我用cookie把这个参数存起来在详情页面取这个参数发现只有第一次取到的是正确的 你在回到父页面在点击进详情页发现取到的数据跟原来的一模一样根本没有发生改变(因为router跳转时是不会刷新页面的所以导致我取得值永远不能更新),我以为是cookie有问题了后来又用了query携带参数跳转,sessionStorage方法存取发现都不行, 看下图解决办法 我也不知道其中是什么原理 没搞明白 但是解决了问题了,看

  • Vue实现商品详情页的评价列表功能

    本篇我们来实现商品详情页的评价列表. 必要的数据 这里咱们举一个数据的例子,明明白白地了解这些数据是如何绑定到模板中的. 数据来自于Foods父组件,当我们选中商品,跳转到商品详情页,那么就需要依赖父组件中的商品数据,在商品详情页面展示评论,当然也可能没有如下"rating"数据.那我们在后面的模板中,就不展示对应的html结构. { "id": 96985579, "name": "麦辣鸡翅2块", "min_pr

  • vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置

    需求: 商品列表页面浏览,进入商品详情,点击返回仍然是之前浏览的位置 实现: 使用 vue 的 keep-alive 的 include 属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新 加需要缓存的列表页面定义一个数据集在 vuex state:{ pageListArr:[] } 列表页的 name 为 proList ,详情页的 name 为 proDetail ,只有 PageListArr 包含的字段才会被缓存,如 pageListArr.push("proList&

  • vue中进入详情页记住滚动位置的方法(keep-alive)

    > 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置,这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive: true // 需要缓存 }, component: resolve => { require(['../view/scrollDemo.vue'], resolve) } } 2.在App.vue中设置缓存组件 <

  • vue实现商品详情页功能之商品选项卡

    vue实现商品详情页功能之商品选项卡

    本文实例为大家分享了vue实现商品详情页功能之商品选项卡的具体代码,供大家参考,具体内容如下 用户点击商品进入商品详情页,默认显示第一个小图对应的大图,然后鼠标滑到小图上,大图也会发生改变,实现效果如下: 实现代码: shopitem.vue的template(HTML),上面是大图,下面是小图,鼠标滑动到小图上,触发getUrl事件(参数是小图的show属性,索引): item.json文件(我的数据文件,默认第一个小图的show为true,默认大图显示第一张.大图和小图的路径一样的,只是cs

随机推荐