router-link使用query和params的区别

使用router-link的时候，携带参数有两种方式，query是根据path进行跳转的，而params是根据name进行跳转的，

获取方式都相同

 

query： 地址栏会在名称后面添加问号同时链接参数以及内容

<ul class="locationHot">
    <router-link tag="li" v-for="itemcity in item.cities" :to="{path:'/location/' + 
     item.cityId, query:{cityName: itemcity.cityName}}" :key="itemcity.cityId"> 
     {{itemcity.cityName}}</router-link>
</ul>

   获取： 

 this.cityName = this.$route.query.cityName;

地址栏：

http://localhost:8080/#/location/002?cityName=%E6%9D%AD%E5%B7%9E

 

params：地址栏遵循路由的配置，只是携带参数过去

<ul>
      <router-link tag="li" class="resultDetail" :to="{name:'shopping', params:{address: 
        item.address}}" v-for="(item,index) in resultList" :key="index">
            <div class="area">{{item.area}}</div>
            <div class="address">{{item.address}}</div>    
      </router-link>
</ul>

获取:

this.name = this.$route.params.address; 

地址栏:

http://localhost:8080/#/shopping

 

简述router和route的区别

router：  router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，

               这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

route：  route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的

               name,path,params,query等 ，可以从vue devtools中看到每个路由对象的不同