Vue3路由學習指南

一、Vue3路由配置

Vue3路由的配置和Vue2基本相同。在Vue3的項目中，我們需要先安裝Vue-Router。可以使用npm命令進行安裝：

npm i vue-router@next

接下來，在main.js中引入Vue-Router:

import { createRouter, createWebHashHistory } from 'vue-router';
import App from './App.vue';

const routes = [
  // 定義路由
  {path: '/', component: Home},
  {path: '/about', component: About},
  {path: '/contact', component: Contact}
];

// 創建路由實例
const router = createRouter({
  history: createWebHashHistory(),
  routes, // 使用`routes`配置選項定義路由
});

const app = createApp(App);
app.use(router); // 使用路由

app.mount('#app');

二、Vue2和Vue3路由區別

Vue3路由相較於Vue2來說最大的變化就是在引入路由實例的方式上。在Vue2中我們使用如下方法:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes:[]
})

而在Vue3中，我們使用的是createRouter：

import { createRouter, createWebHashHistory } from 'vue-router';
import App from './App.vue';

const router = createRouter({
  history: createWebHashHistory(),
  routes, // 使用`routes`配置選項定義路由
});

其中，history的選項要注意，Vue2是通過mode來配置

三、Vue3路由參數

在Vue3中，我們可以在聲明路由時使用props屬性設置組件參數。例如:

const routes = [
  // 定義路由
  {path: '/user/:id', component: User, props: true}, // 傳遞路由參數
];

然後，在組件中，我們通過props來接受路由參數。例如：

const User = {
  props: ['id'], // 接收params傳遞的參數
  template: '<div>UserId: {{id}}</div>'
}

四、Vue3路由配置公共頁面和跳轉頁面

在Vue3中，通常會有一些公共頁面，例如header,footer等重複出現在多個頁面中的元素，我們可以使用layout來定義。例如：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout,
      children: [
        {
          path: '',
          name: 'Home',
          component: Home
        },
        {
          path: '/about',
          name: 'About',
          component: About
        }
      ]
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

在上面的代碼中，我們定義了一個Layout組件，Home和About共用這個Layout組件。Contact是獨立的頁面。在Layout中，我們可以定義一些公共的元素，如header和footer，同時，通過children屬性可以定義子路由。

在跳轉頁面時，我們可以使用router-link來實現，例如：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>

五、Vue3子路由配置

在Vue3中，子路由的定義也和Vue2基本相同。例如：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

在上面的代碼中，我們定義了一個/user路由，它包含了兩個子路由。然後在User組件中，我們可以使用<router-view>來顯示子路由的內容：

<div>
  <h2>User Page</h2>
  <router-link to="/user/profile">Profile</router-link>
  <router-link to="/user/posts">Posts</router-link>
  <router-view/>
</div>

六、Vue3動態路由講解

在Vue3中，我們可以使用動態路由，例如：

const routes = [
  { path: '/user/:id', component: User },
]

在上面的代碼中，我們使用了:id來代表了一個動態的路由，它可以匹配到任何/user/後面的路徑，並將路徑保存到$route.params.id中。

七、Vue3配置子路由關鍵字

在Vue3中，我們可以使用一個新的關鍵字來配置子路由，即：children。例如：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: '',
        component: UserHome
      },
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

在上面的代碼中，我們使用了children來配置/user路由的子路由，其中，”表示默認路由，也就是/user的首頁。在User組件中，我們可以使用不同的子路由來使用<router-view>來顯示。

八、Vue3路由緩存

在Vue3中，我們可以使用keep-alive標籤來實現路由緩存。例如：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

在上面的代碼中，我們使用$router.meta.keepAlive屬性來判斷當前路由是否需要緩存。如果需要緩存，就使用<keep-alive>來包裝。

關於Vue3路由的更多內容可以參考Vue官方文檔中的路由部分：https://v3.cn.vuejs.org/guide/routing.html