vue3中路由的配置

创建路由模块

在项目中创建router.js 路由模块，在其中按照如下4个步骤创建并得到路由的实例对象：

1. 从vue-router中按需导入两个方法

2. 导入需要使用路由控制的组件

3. 创建路由实例对象

4. 向外共享路由实例对象

5. 在mian.js中导入并挂载路由模块

// 1. 从vue-router 中按需导入两个方法
// 2. createRouter 方法用于创建路由的实例对象
// 3. createHashHistory 用于指定路由的工作模式（hash 模式）
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../components/Home.vue'
import User from '../components/User.vue'
import Video from '../components/Video.vue'
export default createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/', component: Home },
        { path: '/user', component: User },
        { path: '/video', component: Video }
    ]
})

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './route/index'
createApp(App).use(router).mount('#app')

history可以指定路由的工作模式

routes可以指定路由的匹配规则

export default createRouter({
    // 指定路由的工作模式
    history: createWebHashHistory(),
    // 路由规则
    routes: [
        { path: '/', component: Home },
        { path: '/user', component: User },
        { path: '/video', component: Video }
    ]
})

动态路由

动态路由指的是：把Hash地址中可变的部分定义为参数项，从而提高路规则的复用性，在vue-router中使用英文的冒号（ : ）来定义路由的参数项。示例代码如下：

// 路由中的动态参数以: 进行声明，冒号后面的是动态参数的名称
{ path: '/article/:id', component: Article }