this.$router.push相關的vue-router的導航方法

router-link

router-link

标簽用于頁面的跳轉。

點選這個

router-link

标簽

router-view

就會渲染路徑為

/page01

的頁面。

注意：

router-link

預設是一個a标簽的形式，如果需要顯示不同的樣子，可以在

router-link

标簽中寫入不同标簽元素，如下顯示為

button

按鈕，但不能在

router-link

标簽上添加@click事件，添加的事件不起作用。

<router-link to="/04">
    <button>to04</button>
</router-link>
           

router.push

下面我們通過JS代碼控制路由的界面渲染，官方是寫法如下：

// 字元串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId:  }})
// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
           

那麼問題來了，如果是全局注冊的路由

Vue.use(VueRouter)

，應該怎麼寫呢？

// 字元串
this.$router.push('home')
// 對象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId:  }})
// 帶查詢參數，變成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})
           

push方法其實和

<router-link :to="...">

是等同的。

注意：push方法的跳轉會向 history 棧添加一個新的記錄，當我們點選浏覽器的傳回按鈕時可以看到之前的頁面。

router.replace

push方法會向 history 棧添加一個新的記錄，而replace方法是替換目前的頁面，不會向 history 棧添加一個新的記錄。用法如下

template

script

this.$router.replace({ path: '/05' })
           

router.go

go方法用于控制history記錄的前進和後退

// 在浏覽器記錄中前進一步，等同于 history.forward()
this.$router.go()
// 後退一步記錄，等同于 history.back()
this.$router.go()
// 前進 3 步記錄router.go(3)
// 如果 history 記錄不夠用，那就默默地失敗呗
this.$router.go()
this.$router.go()
           

其實很好了解：go方法就是浏覽器上的前進後退按鈕，後面的參數就是前進和後退的次數

四、路由的傳參方式

在路由跳轉的過程中會傳遞一個object，我們可以通過

watch

方法檢視路由資訊對象。

watch: {
  '$route' (to, from) {
      console.log(to);
      console.log(from);
  },
},
           

console中看到的路由資訊對象

{
    ...
    params: { id: '123' },
    query: { name: 'jack' },
    ...
}
           

這兩個參數會在頁面跳轉後寫在路徑中，路徑相當于

/page/123?name=jack

1. params

其實這個params我還是有一些疑惑的，就比如下面的寫法：

<router-link :to="{ path: '/05', params: { sex: 'hello param', sex2: 'hello param2' }, query: { name: 'hello query', name2: 'hello query2' }}">05</router-link>
           

傳遞過去的資料卻沒有包含params的資料。

{
    ...
    params: {},
    query: {
        name: 'hello query',
        name2: 'hello query2'
    }
    ...
}
           

下面是我暫時調試成功的一些結論。

傳遞資料

在路由配置檔案中定義參數

//命名路由&路由傳參
  { name: 'com03', path: '/03/:sex', component: Page03 },
           

路徑後面的

/:sex

就是我們要傳遞的參數。

this.$router.push({ path: '/03/441'})
           

此時路由跳轉的路徑

此時我們看到檢視路由資訊對象：

{
    ...
    params: {
        sex: '441'
    }
    ...
}
           

擷取資料

template

<h2> {{ $route.params.sex }} </h2>
           

script

console.log(this.$route.params.sex)
           

注：暫時我隻發現在動态路由比對中傳入資料可以擷取到params。而使用

{ path: '/', params: { sex: '123' }, query: { ...}}

傳遞的資料使用沒有傳遞給下一個頁面元件。如果有使用成功的同學歡迎在留言，我會及時更正的。

2. query

query傳遞資料的方式就是URL常見的查詢參數，如

/foo?user=1&name=2&age=3

。很好了解，下面就簡單寫一下用法以及結果

傳遞資料

template

script

this.$router.replace({ path: '/05', query: { name: 'query', type: 'object' }})
           

路徑結果

路由資訊對象

{
    ...
    query: {
        name: "query",
        type: "object"
    }
    ...
}
           

擷取資料

擷取資料和params是一樣的。

template

<h2> {{ $route.query.name }} </h2>
           

script

console.log(this.$route.query.type)
           

轉載：https://blog.csdn.net/Lucky_LXG/article/details/70598281?locationNum=9&fps=1