vuecli路由传参的方式

1、路由跳转有几种方式？

声明式导航：router-link（必须有to属性），可以实现路由的跳转

编程式导航：利用组件的$router.push或者replace方法，实现路由跳转（可以书写自己的业务）

2、路由传参，参数有几种写法？

params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位

query参数：不属于路径当中的一部分，类似于ajax中的queryString，不需要占位

一、字符串形式

1、

<div>

    <input type="text" v-model="ss">

    <button @click="sous">搜索</button>

  </div>

2、

methods:{

  sous(){

     //路由传参

     //第一种：字符串形式   toUpperCase()转换为大写

     this.$router.push('/login/'+ this.ss + '?k=' + this.ss.toUpperCase());

  }

}

3、

 //配置路由 在后面加上/:ss

    path:'/login/:ss',

二、模板字符串

其它步骤和上面一样

 this.$router.push(`/login/${this.ss}?k=${this.ss.toUpperCase()}`)

三、对象（常用）

上面步骤一样

//这里的name是路由里面的name

    this.$router.push({name:'login',params:{ss:this.ss},query:{k:this.ss.toUpperCase()}})

然后给路由起name:'名字

 name:'login','