vue 跳轉頁面、列表跳轉詳情

原文鏈接：https://www.jianshu.com/p/c699c4d197de

https://www.jianshu.com/p/c699c4d197de  vue 跳轉頁面並傳遞參數

https://blog.csdn.net/anshengsuiyeu/article/details/81872572  vue從一個頁面跳轉到另一個頁面並攜帶參數

https://blog.csdn.net/zangqiqi/article/details/82698747      新聞列表頁跳轉詳情

this.$router.push({path: 'xxx', query: {id: 1}})

this.$router.push({path: '/shippingaddress'})

頁面接收參數
created(){
      let uni = this.$route.query.unique;
       this.name =  this.$route.query.id;
  },

列表頁跳轉詳情頁

列表頁
<template>
    <div class="zone">
        <div class="zone_list">
            <ul>
                <li v-for="(item,i) of newslist" :key="i" @click="gotoDetails(item.id)">
                    <img :src="item.img" alt="">
                    <div class="right">
                        <span class="sp1">{{item.title}}</span>
                        <p class="text">
                            {{item.text}}
                        </p>
                        <span class="time">{{item.time}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name:'zone',
    data(){
        return {
            newslist:[
                {
                  id:1,
                  img: require('../../assets/images/icon_fj.png'),
                  title:"三清山風景名勝區",
                  text: "三清山又名少華山、丫山。因玉京、玉虛、玉華三峯宛如道教玉清、上清、太清三位尊......",
                  time:"2019-07-07",
                  path:"/aticle"
                },
               
            ]
        }
    },
    created(){
        //console.log(this.$route.params.id)
    },
    methods: {
        gotoDetails(id){
            //查看詳情
            this.$router.push({path:'/Detailnews/'+id})
        },
    },
}
</script>

//詳情頁路由
   {//新聞詳情頁
      path: '/detailnews/:id',
      name: 'detailnews',
      meta: {
        title: '新聞詳情頁'
      },
      component: Detailnews
    },

 created(){
      this.getid();
  },
  methods: {    
    getid(){
        //獲取當前頁面收到的id
        this.id = this.$route.params && this.$route.params.id;
        console.log(this.id)
    }
  },