vue-router中传参的两种方式

vue-router中,有query跟params两种传参方式,可以让不同的path指向同一个组件,并且能获取对应的参数

1.params
我们创建一个组件news,其中两个router-link,path不同

<template>
    <div class="hi">
        <h3>新闻列表</h3>
        <router-link to="/news/news001?name=zhangsan">新闻001</router-link>
        <router-link to="/news/news002?name=lisi">新闻002</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{

    }
</script>

我们新建一个组件sonnews

<template>
    <div class="hi">
        <p>{{$route.params.news+'...'+$route.query.name}}</p>
    </div>
</template>
<script>
    export default{

    }
</script>

在路由中配置index.js中写入以下代码

{
      path:'/news',
      name:'news',
      component:news,
      children:[
        {
          path:'/news/:news',
          component:sonnews
        }
      ]
    }

在路由配置index.js中,使用v-bind,也就是”:”的方式绑定一个变量,就绑定了动态路由
如上图中的 :news,就是params传参数,在router-link中path后面的路径一个是news001,一个是news002,但是都指向同一个组件,那就是sonnews,这些参数可以使用$route.params.news来获得.

在news001跟news002后面,有?name=zhangsan这种参数,就是通过query传值,可以用$route.query.name来获取