router和route的区别

$router是 router 实例

$route 为当前激活的路由信息对象。这个属性是只读的，里面的属性是(不可变) 的，不过你可以 watch (监测变化) 它。

params 传值

需要在router中设置对应的参数，否则页面刷新后会丢失传过来的参数

// router.js
{
    path: '/describe/:id', //这样设置后使用时id必传，否则无法正常显示页面(path引入)或者会提示错误(name引入)
    path: '/describe/:id?', //这样设置后id可传可不传
    name: 'Describe',
    component: Describe
   }
   
// 使用： 路由传值的话需要使用name引入，不传值则path 或name均可
<router-link :to="{ name: 'details', params: { id: 123 }}">产品详情</router-link>  
this.$router.push({name:'details',params:{id:123}})  

// 页面url显示结果是：
http://localhost:8081/#/details/123

//接收参数
this.$route.params.id 

query 传值

页面刷新后不会丢失传过来的参数

// router.js
{
    path: '/describe',  //不需要特殊设置
    name: 'Describe',
    component: Describe
   }
   
   
//使用：  路由传值name 和path 都可使用
this.$router.push({name:'details',query:{id:123}})  
this.$router.push({path:'details',query:{id:123}})  
<router-link :to="{ name: 'details', query: { id: 123 }}">产品详情</router-link>  
<router-link :to="{ path: 'details', query: { id: 123 }}">产品详情</router-link>   

// 页面url显示结果是：
http://localhost:8081/#/details?id=213

//接收参数
this.$route.query.id