面試題系列---【vue中router和route區別】

router和route區別：

1.router是路由對象,里邊包含了很多屬性和子對象，例如history對象，主要是用來進行路由跳轉的

1.1路由跳轉方式：

router-link

1.不帶參數

// 字符串
<router-link to="apple"> to apple</router-link>
// 對象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
// 注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當前路由開始。

2.帶參數

​ 2.1 ·query傳遞參數

//直接路由帶查詢參數query，地址欄變成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由帶查詢參數query，地址欄變成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>

​ 2.2 ·params傳遞參數

//直接路由帶路由參數params，params 不生效，如果提供了 path，params 會被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由帶路由參數params，地址欄是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

this.$router.push("/目標路由")

1.不帶參數

// 字符串
router.push('apple')
// 對象
router.push({path:'apple'})
// 命名路由
router.push({name: 'applename'})

2.帶參數

​ 2.1 ·query傳遞參數

//query傳參，使用name跳轉
this.$router.push({
    name:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query傳參，使用path跳轉
this.$router.push({
    path:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query傳參接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;

總結：

query要用path來引入 ；

query在url中顯示參數名和參數值

直白的來說query相當於get請求，頁面跳轉的時候，可以在地址欄看到請求參數

獲取參數的不同`this.$route.query.xxx

​ 2.2 ·params傳遞參數

//params傳參 使用name
this.$router.push({
  name:'second',
  params: {
    id:'20180822',
     name: 'query'
  }
})

//params接收參數
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;

//路由
{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}

總結：

使用params傳參只能用name來引入路由, 如果寫成path，接收參數頁面會是undefined。

params是路由的一部分,必須要在路由后面添加參數名。

params相當於post請求，參數不會再地址欄中顯示。

在瀏覽器url地址欄上展示的形式不同，params直接展示參數值。

獲取參數的不同`this.$route.params.xxx

this.$router.replace("/目標路由")

與router.push(...)方法一致。

this.$router.go(n)

向前或者向后跳轉n個頁面，n可為正整數或負整數

vue 路由跳轉四種方式 的區別

this.$router.push
跳轉到指定url路徑，並想history棧中添加一個記錄，點擊后退會返回到上一個頁面
this.$router.replace
跳轉到指定url路徑，但是history棧中不會有記錄，點擊返回會跳轉到上上個頁面 (就是直接替換了當前頁面)

this.$router.go(n)
向前或者向后跳轉n個頁面，n可為正整數或負整數

2.route表示當前的路由信息，用來獲取路徑內容。