Vue路径传参的方式

方式一：在网址栏中显示id的方法

在vue里面的

<router-link :to="{name:'goodlist',query:{id:1}}">动态详情页</router-link>

在goodslist的模板js里面写

<template>
    <div>
      商品详情页
    </div>
</template>

<script>
    export default {
      created(){
          console.log(this.$route.query.id)
      }
    }
</script>

<style scoped>

</style>

这样传递过来的id就过来了

第二步：

<!--通过路由传递-->
    <router-link :to="{name:'news',params:{id:2}}">新闻列表页</router-link>

在新闻模板下面

<template>
    <div>
      新闻详情页
    </div>
</template>

<script>
    export default {
        name: "newDetail",
      created(){
          console.log(this.$route.params)
      }
    }
</script>

<style scoped>

</style>
路由中配置：

{
  path: '/newDetail/:id',
  name: 'news',
  component: na
},
{