VUE3企业级项目基础框架搭建流程(3)

VUE-Router

npm install vue-router@4

安装完成后，在项目目录里新建一个router文件，我这里的用的是typeScript，所以建立的是router.ts,

该文件是所有视图组件的映射。一般我们会把视图组件放到views文件夹中，如果没有，可以新建一个views文件夹。

在views文件夹中，新建一个HomePage.vue文件，我们把它当作是我们路径需要映射的一个组件。



创建完成后，编写router路径映射文件基础代码

代码如下：

import { createRouter, createWebHashHistory } from "vue-router";

import HomePage from "@/views/HomePage.vue"

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/', component: HomePage }
    ]
})

export default router

编写路由守卫，路由守卫用的最多的一般是前置守卫，详细了解可以查看 router文档

代码如下：

import { createRouter, createWebHashHistory } from "vue-router";

import HomePage from "@/views/HomePage.vue"

// 创建路由实例
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/login',name:'login', component: HomePage }
    ]
})

// 路由前置守卫
router.beforeEach((to, from, next) => {
    // 如果访问登录页面，则继续进行
    if (to.path == '/login') {
        console.log("登录页面")
        next()
    } else {
        type tokentype = string | null;
        const token: tokentype = localStorage.getItem('token')
        console.log("非登录页面")
        if (token) {
            next()
        } else {
            next('/src/views/HomePage.vue')
        }
    }
})

export default router

创建完router文件后，要在main文件中配置router

import { createApp } from 'vue'
import App from './App.vue'
//引入router
import router from './routes'

createApp(App).use(router).mount('#app')