vue路由跳转、传参

1.路由跳转有几种方式

比如：A->B
声明式导航：router-link（务必有to属性），可以实现路由的跳转

 <p>
   <span>请</span>
   <!-- 声明式导航：务必要有to属性 -->
   <router-link to="/login">登录</router-link>
 </p>

编程式导航：利用的是组件实例的$router.push|replace方法，可以试想路由的条状

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

第一种：字符串形式

params参数：属于路径当中的一部分，需要注意，当配置路由的时候，需要占位
query参数：不属于路径当中的一部分，类似于ajax中的quertString /home？k=v&kv= ,不需要占位
例子：

  //配置路由
    routes:[
        {
            path:"/search/:keyword",
            component:Search,
            meta:{show:true}
        }
    ]

   <form action="###" class="searchForm">
   <input
     type="text"
     id="autocomplete"
     class="input-error input-xxlarge"
     v-model="keyword"
   />
   <button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
     搜索
   </button>
 </form>
 <script>
 ...
 methods:{
      //搜索按钮的回调函数：需要向search进行跳转
      goSearch(){
        //路由传递参数：
        //第一种：字符串形式
        this.$router.push('/search/' + this.keyword +"?k=" + this.keyword.toUpperCase())
      }
    }
...
</script>

第二种：模板字符串

methods:{
   //搜索按钮的回调函数：需要向search进行跳转
   goSearch(){
     //路由传递参数：
     //第二种：模板字符串
     this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
   }

第三种：对象

/第三种：对象
 this.$router.push({name:"search",params:{jeyword:this.keyword},query:{k:this.keyword.toUpperCase()}})