【揭秘Vue Router】新手快速上手，掌握組件間路由導航的實戰指南

引言

Vue Router 是 Vue.js 的官方路由管理器，它容許開辟者構建單頁面利用順序（SPA），使得組件間路由導航變得簡單且高效。本文將為妳供給一個單方面的 Vue Router 入門指南，幫助妳疾速控制組件間路由導航的技能。

Vue Router 簡介

Vue Router 是 Vue.js 的官方路由庫，專為 Vue.js 利用順序計劃。它容許用戶在單頁面利用順序中經由過程改變 URL 來切換差其余視圖，而無需重新加載頁面。Vue Router 與 Vue.js 的核心深度集成，使得構建交互式跟呼應式的用戶界面成為可能。

安裝 Vue Router

起首，確保妳的項目中曾經安裝了 Vue.js。然後，可能經由過程 npm 或 yarn 安裝 Vue Router：

# 利用 npm
npm install vue-router

# 或許利用 yarn
yarn add vue-router

設置 Vue Router

在 Vue 項目中，妳須要創建一個名為 router/index.js 的文件來設置路由：

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

Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

在主進口文件（平日是 main.js）中，妳須要引入並利用這個路由器實例：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

路由組件

在 Vue Router 中，每個路由都映射到一個組件。妳可能創建一個名為 Home.vue 的組件，並在路由設置中引用它：

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

同樣，創建一個 About.vue 組件：

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

路由導航

在 Vue 利用順序中，妳可能利用 router-link 組件來創建導航鏈接：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

當用戶點擊這些鏈接時，Vue Router 會主動更新 URL，並襯著對應的組件。

靜態路由婚配

Vue Router 支撐靜態路由婚配，容許妳根據路由參數靜態加載組件。比方：

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

在這個例子中，:id 是一個靜態參數，它會被轉達到 User 組件的 props 中。

編程式導航

Vue Router 還容許妳經由過程編程方法導航：

this.$router.push('/about');

這個方法可能接收一個道路字符串或一個描述地點的東西。

命名路由跟視圖

Vue Router 容許妳為路由命名，並創建多個視圖。比方：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User,
      children: [
        {
          path: 'profile',
          name: 'user-profile',
          component: UserProfile
        },
        {
          path: 'posts',
          name: 'user-posts',
          component: UserPosts
        }
      ]
    }
  ]
});

在這個例子中，User 組件將包含 UserProfile 跟 UserPosts 組件。

總結

Vue Router 是構建單頁面利用順序的富強東西，它供給了豐富的功能跟機動的路由設置。經由過程本文的介紹，妳應當曾經對 Vue Router 有了一個基本的懂得，並可能開端構建本人的單頁面利用順序了。