vue.js學習筆記--vue-router

官方文檔

一、基本使用

1. 安裝和使用vue-router

1） 安裝

npm install vue-router --save

2） 配置

3） 使用
在router/index.js中配置路由映射：

const routes = [
    {path: '', redirect: '/home'},
    { path: '/home', component: Home },
    { path: '/about', component: About }
]

在App.vue中使用路由：

<template>
  <div id="app">
    <router-link to="/home">首頁</router-link>
    <router-link to="/about">關於</router-link>
    <router-view></router-view>
  </div>
</template>

• <router-link>標籤是vue-router中的內置組件，它會被渲染成一個<a/>標籤
• <router-view>標籤會根據當前的路徑，動態渲染出不同的組件
• 網頁的其他內容，比如頂部的標題/導航，或者底部的版權信息等會和<router-view>處於同一等級
• 在路由切換時，切換的是<router-view>掛載的組件，其他內容不會發生改變

2. router-link其他屬性

3. 通過代碼跳轉路由

<template>
  <div id="app">
    <button @click="go_home">首頁</button>
    <button @click="go_about">關於</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
    go_home(){
      this.$router.push("/home")
    },
    go_about(){
      this.$router.push("/about")
    }
  }
}
</script>

4. 動態路由

在某些情況下，一個頁面的path路徑可能是不確定的，比如我們進入用戶界面時，希望是如下的路徑：

• /user/aaa或/user/bbbb
• 除了有前面的/user之外，後面還跟上了用戶的ID
• 這種path和component的匹配關係，我們稱之爲動態路由（也是路由傳遞數據的一種方式）
  

5. 路由懶加載

• 當打包構建應用時，JavaScript包會變得非常大，影響頁面加載。
• 首先，我們知道路由中通常會定義很多不同的頁面。這些頁面最終被打包到一個js文件中。但是，這麼多頁面放在一個js文件中，必然會照成這個頁面非常大。如果我們一次性從服務器請求下來這個頁面，可能需要花費一定的時間，甚至在頁面上出現短暫的空白。
• 如果我們能把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才加載對應組件，這樣就更加高效了。路由懶加載的主要作用就是將路由對應的組件打包成一個個的js代碼塊，只有在這個路由被訪問到的時候，才加載對應的組件。

使用路由懶加載的效果：

路由懶加載的三種方式：

二、嵌套路由

• 比如在home頁面，我們希望通過/home/news和/home/message訪問一些內容
• 一個路徑映射一個組件，訪問這兩個路徑也會分別渲染兩個組件

路徑和組件的關係如下：

實現嵌套路由的兩個步驟：

• 創建對應的子組件，並且在路由映射中配置對應的子路由
• 在組件內部使用<router-view>標籤
  

三、參數傳遞

1. 使用params傳遞

• 配置路由格式：/router/:id
• 傳遞的方式：在path後面跟上對應的值
• 傳遞後形成的路徑：/router/123
• 在頁面中獲取參數：{{$route.params.id}}

使用鏈接的方式跳轉：

<router-link :to="'/about/'+id">關於</router-link>

使用代碼的方式跳轉：

this.$router.push('/about/' + this.id)

2. 使用query傳遞

• 配置路由格式：/router，也就是普通配置
• 傳遞的方式：對象中使用query的key作爲傳遞方式
• 傳遞後形成的路徑：/router?id=123
• 在頁面中獲取參數：{{$route.query.id}}

使用鏈接的方式跳轉：

<router-link :to="{path:'/about',query:{id:123,name:'aaa'}}">關於</router-link>

使用代碼的方式跳轉：

this.$router.push({
	path:'/about',
	query:{
		id:123,
		name:'aaa'
	}
})

四、導航守衛

我們來考慮一個需求：在一個SPA應用中，如何改變網頁的標題呢？

• 網頁標題是通過<title>來顯示的，但是SPA只有一個固定的HTML，切換不同的頁面時，標題不會改變
• 但是我們可以通過JavaScript來修改<title>的內容：window.document.title = '新的標題'
• 那麼在vue項目中，在哪裏修改？什麼時候修改比較合適呢？

1. 全局前置守衛

我們可以在生命週期函數中修改，但是每個組件都需要修改顯然比較麻煩。vue-router提供了導航守衛的概念，可以在路由發生改變的時候執行一些操作。
可以在router/index.js中使用 router.beforeEach 註冊一個全局前置守衛:

router.beforeEach((to, from, next) => {
  // ...
})

每個守衛方法接收三個參數：

• to: Route對象: 即將要進入的目標路由對象
• from: Route對象: 當前導航正要離開的路由
• next: Function函數: 一定要調用該方法，否則路由跳轉不起作用。

我們先在routes數組中加入meta屬性：

{
	path: '/about', 
	component: () => import('../components/About'),
	meta:{
		title: '關於'
	}
}

然後在前置守衛中取到：

router.beforeEach(((to, from, next) => {
    document.title = to.matched[0].meta.title
    next()
}))

2. 全局後置守衛

如果是在路由跳轉之後發揮作用，則可以定義後置守衛，不同的是，函數不需要next函數：

router.afterEach(((to, from) => {
    
}))

3. 路由獨享的守衛

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

4. 組件內的守衛

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不能獲取組件實例 `this`
    // 因爲當守衛執行前，組件實例還沒被創建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該組件被複用時調用
    // 舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 組件，因此組件實例會被複用。而這個鉤子就會在這個情況下被調用。
    // 可以訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 可以訪問組件實例 `this`
  }
}

五、keep-alive