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')

VUE3企业级项目基础框架搭建流程(3)的相关教程结束。