5分鐘瞭解vue-router的基本使用

目的: 瞭解 vue-router 的使用

閱讀時長: 5 分鐘

來源: 並不是原創，整理自視頻

主要內容

1. vue-route的基本使用
2. router的鉤子以及執行順序如何
3. router的參數傳遞方式

---

正文

router.gif

1.基本使用

1-1. 創建一個Route的文件夾，新建index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Routes from './routes.js'

Vue.use(VueRouter);

export default new VueRouter {
  mode: 'hash',
  routes
}

複製代碼

以上代碼注意兩點:

• 第一點: vue 的 第三方組件，都須要經過Vue.use( . . . )的方式去 install 組件。

  • router組件install的時候，會註冊兩個全局組件
    • router-link : 跳轉
    • router-view : 在什麼地方顯示內容
  • 每一個組件上會有兩個屬性(我曾經一度不知道 router 和 route 的區別, 記住下面的兩點，將不用再去犯錯了。)

    • $router : 包含全部的方法

      • $router.push({path:'home'})
      • $router.replace({path:'home'})//替換路由，沒有歷史記錄

    • $route : 包含全部的屬性

      • 

• 第二點: export default new VueRouter ({ }) 裏面有各類屬性和路由的映射表

  • mode: hash: 默認值，/#/
  • mode: history: /
  • routes 路由映射，什麼路由顯示什麼vue組件
  • ...

1-2: 創建routes.js

import Home from '../view/Home.vue';
...

export default [
  {
    path: '/',  // 重定向到home頁面
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  }
  ...
]
複製代碼

1-3: main.js 中註冊 router

...
import router from './router'
...
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
複製代碼

OK: 到這裏，基本路由就已經實現了

我們去app.js使用router-link 和 router-view 吧

<template>
  <div id="app">
    <ul class="nav">
      <li class="nav-item">
        <router-link class="nav-link" to="/home">Home</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

複製代碼

路由懶加載是這個樣子的。

{
  path: '/home',
  component: () => import('../view/Home.vue')
}
複製代碼

嵌套路由是這個樣子的。

{
    path: '/user',
    component: User,
    // child 下面放須要嵌套的路徑和視圖
    children: [
      ...
      {
        path: '/add',
        name: 'userAdd',
        component: () => import('../view/UserAdd.vue')
      }
      ...
    ]
  },
複製代碼

2. router的鉤子以及執行順序如何

1. 全局beforeEach: 通常用來作權限控制。
2. 路由中beforeEnter: 用的很少
3. 組件裏調用 beforeRouteEnter: 這個方法裏面沒有this
4. 全局 router.resolve
5. 全局 afterEach
6. 調用組件的 beforeRouterLeave: 離開是提醒，是否提交表單，是否關注等等
7. beforeRouterUpdate

beforeRouterUpdate 用在路由參數更新了，可是路由沒有更新時使用。

router.beforeEach((to, from, next) => {
  // 每一個路由鉤子都會有三個參數，是to、from、next
  // 具體如何使用，我會單獨寫一個使用jwt權限控制的文章，在那裏面結合實際使用來講明三個參數的使用和路由鉤子的使用狀況
})
複製代碼

這裏，我只聊了下執行順序，具體的能夠參照官方手冊，或者關注我下次的權限控制篇。

3. 參數如何傳遞

參數的傳遞方式有兩種

路由:/detail/1 Vs 路徑：/detail?id=1

• 路由裏面傳參數

vue代碼以下:

<router-link to="/user/detail/1">用戶1</router-link>
-----

routes代碼以下:

{   
    // 路徑裏面傳遞參數是經過斜線傳遞的：好比/user/detail/1
    path: 'detail/:id',
    name: 'userDetail',
    component: () => import('../view/UserDetail.vue')
}
----

這種參數在組件裏面如何獲取呢？

this.$route.params.id

複製代碼

• 路徑裏面問號形式傳參數

<router-link to="/user/detail?id=1">用戶1</router-link>

這種傳遞方式如何在組件裏面獲取參數呢？

this.$route.query.id
複製代碼

---

總結: 本文簡單的聊了一下，如何去初始化一個路由，嵌套路由，路由鉤子的執行順序以及參 數的傳遞方式。

還有路由守衛在權限控制中使用狀況並未介紹，我將在下一篇去寫一個完整的小demo，講述路由鉤子在權限控制中的使用，jwt的使用，已及權限控制實現的基本實現。

---

ps: 我是一個前端初學者，博客徹底是記錄本身學習的一種方式，所寫文字確定有不清晰和不完善以及錯誤的地方。若是不妥之處，但願大神的批評指正，將不勝感激。

謝謝觀看！

我是海明月，前端小學生。