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)"...
·
我们点新闻进入详情页面,需要传几个值到详情页面,比如 标题,时间,作者等等。下面说说怎么传递参数。
这是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
更多推荐
已为社区贡献4条内容
所有评论(0)