8、vue路由跳轉 params與query 路由傳參,vue-router打開新頁面

params與query

router文件下index.js里面，是這么定義路由的：

{
    path: '/about',
    name: 'About',
    component: About
}

用query傳參可以直接寫在path路由地址里，也可寫在json對象中

//query,用路徑跳轉

this.$router.push({
  	path:'/about',
  	query:{
  		name:'about',
  		code:111
  	}
})
  		    

接收參數

this.$route.query

是{name: "about", code: "111"}

用params傳參需要直接寫在json對象中，跳轉地址為router中配置的name（此處是About），params中是傳的數據

//params,用name跳轉傳參
this.$router.push({
	name:'About',
	params:{
		name:'about',
		code:111
	}
})

接收參數

this.$route.params.code;
是
{name: "about", code: "111"}

總結：

query要用path來引入，params要用name來引入，接收參數都是類似的，分別是this.$route.query.name和this.$route.params.name。
注意接收參數的時候，已經是$route而不是$router

query更加類似於我們ajax中get傳參，params則類似於post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，后者則不顯示

vue-router打開新頁面

      const { href } = this.$router.resolve({
        path: '/about',
        query: {
          id: item.id
        }
      })
      window.open(href, '_blank')