Vue路由 传参几种方式

① 动态路由传参

{path:'detail/:username?',name:'a', component:()=>import('@/components/Detail.vue')}

<router-link to="/news/detail/老郭">新闻详情页1</router-link>

http://localhost:8081/#/news/老郭

该种方式最为简单，:username相当于接收一个动态参数，随路由跳转时携带，在目标组件内进行接收，参数会在地址栏最后，组成地址的一部分，如果不传参数跳转会发生错诶。

http://localhost:8081/#/news/detail/老郭

接收方法：

 <h1>新闻详情参数：{{$route.params.username}}</h1>

所以为了防止不传参时，跳转路径错误 在动态参数后面加一个  ? （:username?） ,表示可传可不传。

②  声明式路由传参（命名式）

 <router-link :to="{name:'a',params:{username:'老郭'}}">新闻详情页3</router-link>
 <router-link :to="{name:'a',query:{username:'老郭'}}">新闻详情页3</router-link>

name是给路由起的别名，由于路径太长不便于操作，类似 ： 姓名 <===>身份证号

a===/news/detail  其中detail是news的子路由

但地址栏始终是path的路径，最重要的应用场景是配合params进行传参

③  编程式路由（params && query）

  goDetail(){
                 this.$router.push({
                  // query 传参
                  path:'/news/detail',
                  query:{
                  username:this.username
                  },
                  // params 传参
                   name:'a',
                   params:{
                    username:this.username
                  },
                 })
             }

当需要事件触发时，用编程式路由

区别

1. params 只能与name配合使用 与  path 配合无效

     query 与name  && path  配合使用皆可

2.  params 类似于post 

    query 类似于  get  参数会 拼接在路径后面

3.  params 收到参数 刷新会丢失  。解决方法 ： 配置动态路由  参数名即为 params 内参数的名字    动态路由  :参数   相当于 params :{参数： }

  params:{
                  
      username:this.username
                  },

 {path:'detail/:username?',name:'a', component:()=>import('@/components/Detail.vue')}

 query 传递参数 刷新不会丢失