vue----传参

一、用name传递参数

<p>{{$route.name}}</p>
{
  path:'test1',
  name:'test1',
  component:test1
},

二、通过<router-link> 标签中的to传参

<router-link :to="{name:'test1',params:{username:'jspang',id:'6666'}}">test1</router-link>

test1.vue
页面接收参数
<p>{{$route.name}}--{{$route.params.username}}--{{$route.params.id}}</p>
test1--jspang--6666

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

name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

三、vue-router 利用url传递参数

app.vue
<router-link to="params/19/apple"></router-link>

params.vue
<p>newId:{{$route.params.newId}}</p>

index.js
{
  path:"/params/:newId/:newtitle“,
  //正则id必须为数字path:"/params/:newId(\\d+)/:newtitle“,
  component:params
}

query与params的区别

query刷新页面数据不会消失

<router-link :to="{name:'newslist',query:{mid:281,type:'list',limit:10}}">MORE ></router-link>

methods:{
  handelList:function(id){
    this.$router.push({
        path: '/newscontent', 
        query: {
            pid: id
        }
    })
  }
},