vue 点击新闻列表进入详情页面 params和query两种参数传值方法

我们点新闻进入详情页面,需要传几个值到详情页面,比如 标题,时间,作者等等。下面说说怎么传递参数。

这是html代码

 <ul> <li class="news_con_list" :id="item.id" v-for="item in news_fn"> <span @click="news_luyou(item.id,item.title)" >{{item.title}}</span> </li> </ul> 

然后在新闻列表页面写一些js

 methods:{ news_luyou:function(id,news_title){ this.$router.push({ name:'news_list_con', params:{id:id,title:news_title}});//如果用params 应用name //this.$router.push({ path:'/news/news_list_con', query:{id:id,title:news_title}}); //如果用query 就用path } }, 

请注意,使用query 和params 传递参数的时候,路由配置也不一样
注意:如果使用query 传递参数,path参数里面一定要写父级路由,不然进入详情页里面,导航的选中效果就丢失了

如果我备注的有问题,欢迎留言指正。

然后配置路由(index.js)

 routes: [ /*{//这是用query 传递参数的路由配置 在用query传递参数的时候,不用接收参数,否则无法获取 path:"/news/news_list_con", name: 'news_list_con', component: Newslist },*/ {//这是在params 传递参数的情况下,需要接收参数, path:"/news/news_list_con:/id/:title", name: 'news_list_con', component: Newslist } ] 

关于路由配置,我本人就实测到这些方法,若还有其它细节,欢迎大家留言交流。

最后在详情页面里面调用

 this.title=this.$route.params.title; 

微博:https://weibo.com/yangsl520

原文链接:https://blog.csdn.net/u010022260/article/details/89972091?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277607816782248557448%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277607816782248557448&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-5-89972091-null-null.nonecase&utm_term=%E6%96%B0%E9%97%BB

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片

    暂无评论内容