129. Python語言 的 專案前導(下) 之 Vue 第九章 ：Vue-Router 基礎

雲山·若水發表於2020-12-09
PythonVue

Vue-Router 基礎

本章主題

  

關鍵詞

  

路由基本

  在網頁中，經常需要發生頁面更新或者跳轉。這時候我們就可以使用 Vue-Router 來幫我們實現。Vue-Router 是用來做路由的，也就是定義 url規則 與具體的 View 對映的關係。可以在一個單頁面中實現資料的更新。

  

安裝

  1. 使用CDN：
    • 載入最新版的：<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>。
    • 載入指定版本的：<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>。

  2. 下載到本地：<script src="../../lib/vue-router.js"></script>。

  3. 使用npm安裝：npm install vue-router。

  

基本使用

<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <ul class="nav nav-tabs">
                    <li role="presentation" class="active"><router-link to="/find">發現音樂</router-link></li>
                    <li role="presentation"><router-link to="/my">我的音樂</router-link></li>
                    <li role="presentation"><router-link to="/friend">朋友</router-link></li>
                </ul>
                <!-- 路由出口 -->
                <!-- 路由匹配到的元件將渲染在這裡 -->
                <router-view></router-view>
            </div>
        </div>
    </div>
</div>

<script>
    var find = Vue.extend({template: "<h1>發現音樂</h1>"});
    var my = Vue.extend({template: "<h1>我的音樂</h1>"});
    var friend = Vue.extend({template:"<h1>朋友</h1>"});
    var routes = [
        {path: "/find",component: find},
        {path: "/my",component: my},
        {path: "/friend",component: friend},
        {path: "/",component:find}
    ]
    const router = new VueRouter({routes});
    new Vue({router}).$mount("#app"); 
</script>

解釋：

  1. 在 vue-router 中，使用 <router-link> 來載入連結，然後使用 to 表示跳轉的連結。vue-router 最終會把 <router-link> 渲染成 <a> 標籤。
  2. <router-view> 是路由的出口，也就是相應 url 下的程式碼會被渲染到這個地方來。
  3. Vue.extend 是用來載入模板的。
  4. routes 是定義一個 url 與元件的對映，這個就是路由。
  5. VueRouter 建立一個路由物件。

  

動態路由

  在路由中有一些引數是會變化的，比如檢視某個使用者的個人中心，那肯定需要在 url 中載入這個人的 id，這時候就需要用到動態路由了。

<div id="app">
    <router-link to="/user/123">個人中心</router-link>
    <router-view></router-view>
</div>

<script>
    let UserProfile = {template:"<h1>個人中心：{{$route.params.userid}}</h1>"}
    var routes = [
        {path: "/user/:userid",component: UserProfile}
    ]
    const router = new VueRouter({routes});
    new Vue({router}).$mount("#app"); 
</script>

解釋：

  1. :userid：動態的引數。
  2. this.$route.params：這個裡面記錄了路由中的引數。

  

元件複用

  當使用路由引數時，例如從 /user/foo 導航到 /user/bar ，原來的元件例項會被複用。因為兩個路由都渲染同個元件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味著元件的生命週期鉤子不會再被呼叫。

  複用元件時，想對路由引數的變化作出響應的話，你可以簡單地 watch(監測變化)``$route 物件：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化作出響應...
    }
  }
}

  或者是使用後面跟大家講到的 導航守衛：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

  

匹配404錯誤

  在路由規則中，* 代表的是任意字元。所以只要在路由的最後新增一個 * 路由，那麼以後沒有匹配到的 url 都會被匯入到這個檢視中。

let UserProfile = {template:"<h1>個人中心：{{$route.params.userid}}</h1>"};
let NotFound = {template: "<h1>您找的頁面已經到火星啦！</h1>"}
var routes = [
    {path: "/user/:userid",component: UserProfile},
    {path: "*",component: NotFound},
]

  

巢狀路由

  有時候在路由中，主要的部分是相同的，但是下面可能是不同的。比如訪問使用者的個人中心是 /user/111/profile/ ，檢視使用者發的貼子是 /user/111/posts/ 等。這時候就需要使用到巢狀路由。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當 /user/:id/profile 匹配成功，
          // UserProfile 會被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當 /user/:id/posts 匹配成功
          // UserPosts 會被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
});

  

程式設計式導航

  之前我們學習了使用 <router-link> 可以在使用者點選的情況下進行頁面更新。但有時候我們想要在 js 中手動的修改頁面的跳轉，這時候就需要使用程式設計式導航了。

  

$router.push 跳轉

  想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧新增一個新的記錄，所以，當使用者點選瀏覽器後退按鈕時，則回到之前的 URL。

  當你點選 <router-link> 時，這個方法會在內部呼叫，所以說，點選 <router-link :to="..."> 等同於呼叫 router.push(...)。

宣告式程式設計式
<router-link :to="...">router.push(...)
// 字串
router.push('home')

// 物件
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 帶查詢引數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

  注意： 如果提供了 path ，params 會被忽略，上述例子中的 query 並不屬於這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有引數的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這裡的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

  

router.replace(location, onComplete?, onAbort?)：

  跟 router.push 很像，唯一的不同就是，它不會向 history 新增新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。

宣告式程式設計式
<router-link :to="...">router.push(...)

  

router.go(n)：

  這個方法的引數是一個整數，意思是在 history 記錄中向前或者後退多少步，類似 window.history.go(n)。

// 在瀏覽器記錄中前進一步，等同於 history.forward()
router.go(1)

// 後退一步記錄，等同於 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

  

命名路由

  有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在連結一個路由，或者是執行一些跳轉的時候。你可以在建立 Router 例項的時候，在 routes 配置中給某個路由設定名稱。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

  要連結到一個命名路由，可以給 router-link 的 to 屬性傳一個物件：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

  這跟程式碼呼叫 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

  

命名檢視

  有時候想同時 (同級) 展示多個檢視，而不是巢狀展示，例如 建立一個佈局，有 sidebar(側導航) 和 main(主內容) 兩個檢視，這個時候命名檢視就派上用場了。你可以在介面中擁有多個單獨命名的檢視，而不是隻有一個單獨的出口。如果 router-view 沒有設定名字，那麼預設為 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

  一個檢視使用一個元件渲染，因此對於同個路由，多個檢視就需要多個元件。確保正確使用 components 配置 (帶上 s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

  

重定向和別名

  重定向也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b ：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

  重定向的目標也可以是一個命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

  “重定向”的意思是，當使用者訪問 /a 時，URL將會被替換成 /b，然後匹配路由為 /b，那麼“別名”又是什麼呢？

  /a 的別名是 /b，意味著，當使用者訪問/b時，URL 會保持為 /b，但是路由匹配則為 /a，就像使用者訪問 /a 一樣。

  上面對應的路由配置為：

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

  

官方文件

  更多內容請參考 vue-router 官方文件：https://router.vuejs.org/zh/

  

總結小便條

本篇文章主要講了以下幾點內容：

  

  本章回顧暫時就到這了，如果還有點暈，那就把文章裡所有引用的案例程式碼再敲幾遍吧。拜拜~

相關文章