1. 程式人生 > 其它 >vue路由傳參問題

vue路由傳參問題

1.路由傳遞引數(物件寫法),path是否可以結合params引數一起使用?

this.$router.push({
        path: "/search", // 跳轉路徑
        params: {keyword: this.keyWord}, // params傳遞引數
        query: {k: this.keyWord.toUpperCase()} // query傳遞引數
      })

  路由跳轉傳參的時候,物件的寫法可以時name,path的形式,但是需要注意的是,path不能與params引數一起使用

  1.1 路徑會出現問題:需要跳轉的元件名稱並沒有出現

  1.2 警告

2.如何指定params引數可傳可不傳?

 

 // 沒有傳遞params引數
this.$router.push({
        name: "search",
        query: {k: this.keyWord.toUpperCase()}
      })

  2.1 如果路由要求傳遞params引數,但是並沒有傳遞,URL會有問題

  解決方法:配置路由,佔位的時候,在佔位的後面加上一個問號?

  ?就代表:params可以傳遞,或者不傳遞

  

 {
        name: "search",
        path: "/search/:keyword?", // 佔位後面新增一個 ? 代表可傳,或者可不穿
        component: Search,
        meta: {
            show: true
        }
    },

 

沒有問題

 3. params引數可以傳遞,也可以不傳遞,但是如果傳遞的是空串,如何解決?

this.$router.push({
        name: "search",
        params: {keyword: ""}, // 傳遞空串
        query: {k: this.keyWord.toUpperCase()}
      })
    }

依舊是URL的問題:

解決:使用undefined解決:params引數可傳遞,不傳遞(空的字串)

this.$router.push({
  name: "search",
  params: {keyword: "" || undefined},
  query: {k: this.keyWord.toUpperCase()}
})

雖然引數不會進行傳遞,但是解決了URL的問題