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

免费下载