vue2和vue3中使用Vue Router的些许不同

Vue-cli 3.x  的更新进带来了 Vue Router 的一系列改进，有以下常用几点。

第一. mode ( 模式 ) 
由原来vue-cli 2.x 的 mode: "history" 更改为 vue-cli 3.x  history: createWebHistory()

// vue2-router

import VueRouter from "vue-router"
const router =new VueRouter ({
    mode:'history',
    ..
})

// vue3-router
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
     ...
})

相比较 vue2 来讲 多了一步引用 vue-router API 和 创建路由方式的不同 。

第二. base ( 基础路径 ) 
由原来 vue-cli 2.x 的 base: "/" 更改为 传给 createWebHistory() 的第一个参数作为 base。

注意！！！

base选项仅影响生成的路由链接（<router-link>和编程式导航），而不会对页面的实际 URL 路径产生影响。真实的 URL 路径是由服务器处理的。

基础路径使用createWebHistory才能发挥作用，放在createWebHashHistory上没用。

//vue2-router

import VueRouter from "vue-router"
const router =new VueRouter ({
     mode: 'history',
     base:  '/',
})

// vue3-router
import { createRouter, createWebHistory }  from 'vue-router'
const router = createRouter({
    history: createWebHistory('/'),
     ...
})

在Vue Router中，createWebHistory('/')中的斜杠 / 表示基本路径（base path）。它用于指定应用程序部署的根目录。

当您使用普通模式（history mode）时，Vue Router使用HTML5 History API来管理路由状态。这意味着您的应用程序的URL不再需要#符号，并且可以更具语义性。

当您设置基本路径为 / 时，表示您的应用程序将部署在域名的根目录上。例如，如果您的应用程序部署在 https://example.com/ 上，则基本路径应该设置为 /。

如果您将基本路径设置为其他值，比如 /myapp/，则表示您的应用程序将部署在 https://example.com/myapp/ 上，其中 /myapp/ 是相对于根目录的子目录。

通过在 createWebHistory() 中指定基本路径，Vue Router就能够正确地处理路由并生成正确的URL。

第三. 捕获/匹配所有路由
由原来 vue-cli 2.x 的  "/user/*" 更改为 用带有自定义正则表达式的参数进行定义：/:catchAll(.*)

'/:catchAll(.*)'表示捕获 / 匹配所有路由 ( /* ) 
catchAll是一个vue router路径配置中的路径表达式 ， 使用通配符参数语法 ， 用于匹配所有未匹配到其他路由的路径。

:冒号前缀，表示可匹配任何路径片段，(.*)是一个正则表达式，用于匹配零个或多个任意字符，包括斜杠

一般会用于404页面或动态路由的功能；

// vue2-router
const router =new VueRouter ({
    mode:'history',
    base:  '/',
    routes: [
        { path: '/user/:edit*'},
    ]
})

// vue3-router
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path:'/user/:edit:catchAll(.*)',
        }
    ]
})