vue 路由之间的简单传参小记

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

首先要在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
    }

})

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

<a @click="routerTo(item.id)"></a>//绑定元素事件

export default {
    data(){
        return {
            article:[],
            url:"http://10.9.25.38:80/"
            }
    },
    methods:{    
        routerTo(id){//创建一个事件触发传参
            this.$router.push( '/article-details/'+id);//写清所传对象路径
        }
    },
    mounted(){//获取外部数据
        axios.get(this.url + "eee").then(res => {
          this.article = this.article.concat(res.data.serve.article);
        });
    }
}

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

export default {
data(){
      return {
        details:[],
        particulars:{},
        show:true,
        url:"http://10.9.25.38:80/"
        }
    },
created(){//钩子函数
      axios.get(this.url + "eee").then(res => {//获得外部接口数据
          this.details = res.data.serve.details;
          console.log(this.details)
        }).then(res => {
          this.details.forEach((value,index)=>{ //循环遍历外部参数数据
            if(this.details[index].id==this.$route.params.id){//判断是否是需要数据
              this.particulars=this.details[index];//赋予对象
            }
          })   
        })    
    }
｝

备注：this.$route.params.id 这个就是所接受数据！！！