router與route的參數(shù)對比

TIM圖片20190520161431.png

$router

是什么？

$router是一個全局路由對象，是VueRouter的實例，我們可以在任何地方使用它。

常用方法：

作為全局路由對象，它包含了許多屬性。譬如：history對象。

this.$router.push('/user')  // 跳轉(zhuǎn)路由
this.$router.replace('/user')   // 跳轉(zhuǎn)路由，但是不會有記錄，不入棧。

$route

是什么？

$route是一個局部對象，表示當(dāng)前正在跳轉(zhuǎn)的路由對象。

常用：

1. 使用params傳遞參數(shù)

//  使用帶params的路由跳轉(zhuǎn)
this.$router.push({name:'user',params:{id:1}})
//  對應(yīng)取參
this.$route.params.id

注：使用params進(jìn)行傳參時，只能使用name，不然取參取不到，圈起來，要考的~

2. 在path中進(jìn)行配置（與params類似）

this.$router.push(`/user/${userId}`)
// 這時路由需要進(jìn)行特殊配置
   {
     path: '/user/:userId',
     name: 'user',
     component: components['user']
   }
//  對應(yīng)取參
this.$route.params.id

3. 使用query

//  使用query
this.$router.push({path: '/user',query:{userId:2}}) 

//  對應(yīng)取參
this.$route.query   // get請求url后面帶的查詢參數(shù)

params與query使用區(qū)別

• url上
  params方式，在url中不會將傳遞的參數(shù)進(jìn)行顯示，類似于post，相對安全。
  query方式，在url中會將傳遞的參數(shù)進(jìn)行展示，類似于get，不安全。
• 用法
  params需要用name引入，query需要path引入。