Vue3-09 Vue Router

For Vue3

安装

yarn add vue-router@4

创建路由实例

创建一个Hash模式的最简单路由并应用：

import {createApp} from 'vue';
import VueRouter from 'vue-router';

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})


const app = createApp(App);

app
  .use(router)
  .use(store)
  .mount('#app');

历史记录模式

使用createWebHashHistory()创建Hash模式，使用createWebHistory()创建HTML5模式，并应用在createRouter的history选项

推荐使用HTML5模式，但是需要在服务器上添加回退路由，配置实例参考官网。

要注意，如果使用HTML5模式，vue.config.js中的publicPath需要配置为绝对路径'/'，不应该配置为相对路径，否则会出现资源找不到的情况！

路由匹配

在参数中自定义正则

在动态匹配路由时，如果有两个路径相同的动态路由，可以再括号中为参数指定自定义正则，例如为orderId指定数字匹配：

const routes = [
  // /:orderId -> 仅匹配数字
  { path: '/:orderId(\\d+)' },
  // /:productName -> 匹配其他任何内容
  { path: '/:productName' },
]

这样，/25就会匹配第/:orderId，其他情况会匹配/:productName，路由的定义顺序不重要，因为自定义正则有着更高的优先级

要主要确保转义\

可重负参数

如果有需要匹配多个部分的路由，例如/first/second/third，使用*（0个或多个）和+（一个或多个）将参数标记为可重复

const routes = [
  // /:chapters ->  匹配 /one, /one/two, /one/two/three, 等
  { path: '/:chapters+' },
  // /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等
  { path: '/:chapters*' },
]

这将提供一个参数数组，使用命名路由时也需要传递数组。同时也可以通过在右括号天津嘉它们与自定义正则结合使用

const routes = [
  // 仅匹配数字
  // 匹配 /1, /1/2, 等
  { path: '/:chapters(\\d+)+' },
  // 匹配 /, /1, /1/2, 等
  { path: '/:chapters(\\d+)*' },
]

可选参数

使用?来将一个参数标记为可选：

const routes = [
  // 匹配 /users 和 /users/posva
  { path: '/users/:userId?' },
  // 匹配 /users 和 /users/42
  { path: '/users/:userId(\\d+)?' },
]

命名视图

如果希望同级展示多个视图，在同一个组件中存在多个<router-view>，这个时候就可以使用命名视图，例如：

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

在配置时，多个视图需要配置多个组件在components选项上，key值为<router-view>的name：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // LeftSidebar: LeftSidebar 的缩写
        LeftSidebar,
        // 它们与 `<router-view>` 上的 `name` 属性匹配
        RightSidebar,
      },
    },
  ],
})

利用命名视图也可以创建嵌套视图的复杂布局，例如下面的例子：

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar />
  <router-view />
  <router-view name="helper" />
</div>

Nav</