【輕鬆掌握Vue路由Vue-Router】入門到實戰的詳細教程

引言

隨着前端技巧的開展，單頁利用（SPA）曾經成為主流。Vue.js 作為一款風行的前端框架，其官方路由管理器 Vue-Router 在構建單頁利用中扮演着重要角色。本文將帶你從入門到實戰，單方面懂得 Vue-Router。

一、Vue-Router 簡介

Vue-Router 是 Vue.js 的官方路由管理器，它使得構建單頁利用變得簡單高效。經由過程 Vue-Router，我們可能實現頁面跳轉、URL 道路與視圖的婚配、頁面狀況的保存等功能。

二、安裝與設置

1. 安裝

利用 npm 或 yarn 安裝 Vue-Router：

npm install vue-router
# 或
yarn add vue-router

2. 設置

在 Vue 項目中，起首須要創建一個路由實例，並在 Vue 實例中注入該路由實例。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

new Vue({
  router
}).$mount('#app')

三、路由設置

在 Vue-Router 中，路由設置以數組情勢存在，每個路由東西包含以下屬性：

• path：路由道路
• name：路由稱號
• component：路由組件
• meta：路由元信息

1. 嵌套路由

嵌套路由容許我們在子路由中定義道路跟組件。

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'about',
          name: 'about',
          component: () => import('./views/About.vue')
        }
      ]
    }
  ]
})

2. 靜態路由

靜態路由容許我們在路由道路中利用靜態參數。

const router = new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: () => import('./views/User.vue')
    }
  ]
})

四、導航與保衛

1. 導航

在 Vue-Router 中，可能利用以下方法停止導航：

• router.push()：編程式導航，增加歷史記錄
• router.replace()：編程式導航，不增加歷史記錄
• router.go()：編程式導航，相稱於瀏覽器的行進/撤退按鈕

2. 保衛

Vue-Router 供給了全局保衛、路由獨享保衛跟組件內保衛，用於在路由跳轉過程中停止權限檢查等操縱。

router.beforeEach((to, from, next) => {
  // 在路由跳轉前履行
  next()
})

五、實戰案例

以下是一個利用 Vue-Router 的簡單示例：

<template>
  <div>
    <h1>Vue-Router 實戰案例</h1>
    <router-link to="/">首頁</router-link>
    <router-link to="/about">對於我們</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Home from './views/Home.vue'
import About from './views/About.vue'

export default {
  name: 'App',
  components: {
    Home,
    About
  }
}
</script>

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

new Vue({
  router
}).$mount('#app')

六、總結

Vue-Router 是 Vue.js 的官方路由管理器，它可能幫助我們輕鬆構建單頁利用。經由過程本文的介紹，信賴你曾經控制了 Vue-Router 的基本用法。在現實開辟中，你可能根據本人的須要停止擴大年夜跟優化。