vue 路由之间的简单传参小记-CSDN博客

实现一个简单的点击列表进入详情页的功能。

首先要在router.js文件中注册导入两个路由

import Article from './views/article.vue'

import Article_details from './views/article-details.vue'

var rorter = new Router({

{
      path: '/article/',
      name: 'article',
      component: Article,
    },
    {
      path: '/article-details/:id',//此处绑定你想要传的参数，自己起名
      name: 'Article_details',
      component: Article_details
    }

})

其次就是在要传参的路由页面给事件触发传参

 1 <a @click="routerTo(item.id)"></a>//绑定元素事件
 2 
 3 export default {
 4     data(){
 5         return {
 6             article:[],
 7             url:"http://10.9.25.38:80/"
 8             }
 9     },
10     methods:{    
11         routerTo(id){//创建一个事件触发传参
12             this.$router.push( '/article-details/'+id);//写清所传对象路径
13         }
14     },
15     mounted(){//获取外部数据
16         axios.get(this.url + "eee").then(res => {
17           this.article = this.article.concat(res.data.serve.article);
18         });
19     }
20 }

然后在所要接收参数的页面处理接收参数

 1 export default {
 2 data(){
 3       return {
 4         details:[],
 5         particulars:{},
 6         show:true,
 7         url:"http://10.9.25.38:80/"
 8         }
 9     },
10 created(){//钩子函数
11       axios.get(this.url + "eee").then(res => {//获得外部接口数据
12           this.details = res.data.serve.details;
13           console.log(this.details)
14         }).then(res => {
15           this.details.forEach((value,index)=>{ //循环遍历外部参数数据
16             if(this.details[index].id==this.$route.params.id){//判断是否是需要数据
17               this.particulars=this.details[index];//赋予对象
18             }
19           })   
20         })    
21     }
22 ｝