vue3 中 vue-router 的使用

安裝： npm install vue-router@4 

路由：

// src/router/index.js文件
import {createRouter, createWebHistory} from "vue-router"
import Home from '../views/Home.vue'

const routes = [

  {

    path: '/',

    name: 'Home',

    component: Home,

    children: [

      {

        path: "/dashboard",

        name: "dashboard",

        meta: {

          title: '系統主頁'

        },

        component: () => import("../views/Dashboard.vue")

      }

    ]

  },

  {

    path: "/login",

    name: "Login",

    meta: {

      title: '登錄'

    },

    component: () => import("../views/Login.vue")

  }

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router    

上述使用的是 history 模式，hash 模型需要做的改變如下（需將createWebHistory改為createWebHashHistory）：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})