第一步: 下载安装 vue-router
第二步:在项目入口文件main.js 中引入 vue-router
第三步: 使用vue-router
第四步:在main.js 文件中,配置路由规则
第五步:创建vue-router实例对象,参数是路由配置规则
第六步:将router 实例对象挂载到根实例 new Vue()上
第七步:在app.vue 根组件中定义导航标签 ,该标签最后被解析成a 标签
第八步:在app.vue 根组件中定义一个坑 router-view 该标签就是用来放对应的路由匹配到的组件
下面是具体项目的实现
// 1. 定义路由组件.
// 也可以从其他文件导入
import {createRouter, createWebHashHistory} from 'vue-router'
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
export const constantRoutes = [
path: '/logout',
name: 'logout',
component: () => import('@/views/logout'),
meta: {
title: '首页',
roles: 'any', //userType: 'any'(user only), 'anonymous'|null(anonymous only), '!admin'(all but except specific role), ['user', 'admin', null(for anonymous)...](whitelist), ['!', 'user'...](blacklist)
},
},
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
const router = createRouter({
history: createWebHashHistory(),
routes: constantRoutes,
})
export default router