vue路由切换与传参总结

1.路由跳转
1.1编程式导航
官网：

<button 
          class="sui-btn btn-xlarge btn-danger" 
          type="button" 
          @click="goSearch">
            搜索
</button>

methods:{
    //搜索按钮的回调函数，需要向search路由进行跳转
    goSearch(){
    //编程式导航：想search路由进行跳转
   		this.$router.push("/search")
   }

1.2声明式导航
官网

 <router-link to="/home" class="logo" >
          <img src="./images/logo.png" alt="" />
  </router-link>

2.路由传参（params传参，query传参）
2.1编程式
2.1.1（非props）
通过params传参需要在配置路由时占位

{
      path:"/search/:keyword?",//params:路由传参，需要在路径中进行占位
      component:Search,
      meta:{
        showFooter:true
      },
      name:"search",
    },

//传参第一种：字符串形式
      // this.$router.push("/search/"+this.keyword)//param传参
      // this.$router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase())//query传参
    
 //传参第二种：模板字符串
      // this.$router.push(`/search/${this.keyword})//param传参
      // this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)//param传参+query传参
    
 //第三种：对象写法
      // this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})

路由组件中：

<h1>params参数-----{{ $route.params.keyword }}</h1>
<h1>query参数------{{ $route.query.k }}</h1> 

2.1.2通过props传参（小白，说的不对，请指正，谢谢）
在配置路由时：

{
      path:"/search/:keyword?",//params:路由传参，需要在路径中进行占位
      component:Search,
      meta:{
        showFooter:true
      },
      name:"search",
      props:true,//当 props 设置为 true 时，route.params 将被设置为组件的 props
    },

路由组件中

<h1>params参数-----{{ $route.params.keyword }}======{{ keyword }}</h1>

props:["keyword"]

添加链接描述
添加链接描述