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

海明月發表於2019-05-03
Vue

目的: 瞭解 vue-router 的使用

閱讀時長: 5 分鐘

來源: 並非原創，整理自視訊

主要內容

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

正文

router.gif

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

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 : 包含所有的屬性

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

  • 第二點: 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>

複製程式碼

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

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

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

巢狀路由是這個樣子的。

{
    path: '/user',
    component: User,
    // child 下面放需要巢狀的路徑和檢視
    children: [
      ...
      {
        path: '/add',
        name: 'userAdd',
        component: () => import('../view/UserAdd.vue')
      }
      ...
    ]
  },
複製程式碼

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

5分鐘瞭解vue-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: 我是一個前端初學者，部落格完全是記錄自己學習的一種方式，所寫文字肯定有不清晰和不完善以及錯誤的地方。如果不妥之處，希望大神的批評指正，將不勝感激。

謝謝觀看！

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

相關文章