vite+vue3项目，配置路由独立文件、vue3路由动画、vue3路由鉴权（路由前置守卫）

创建vite+vue3项目

在文件夹下打开cmd黑窗口，执行命令

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

详情请看官网链接：https://cn.vitejs.dev/guide/

在 Visual Studio Code 中打开

配置路由独立文件

第一步：下载：yarn add vue-router

第二步：修改App.vue文件内容

第三步：在src下创建视图文件夹

第四步：在src下创建路由文件

第五步：配置路由文件

import { createRouter, createWebHistory } from 'vue-router'
import home from '../view/home.vue'
const routerHistory = createWebHistory()
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/login',
            name: 'login',
            component: () => import('../view/login.vue')
        },
        {
            path: '/home',
            component: home
        },
    ]
})

export default router;

第六步：配置main文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router.js' // 加载 router 底下的 index.js 路由配置文件

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

第七步：跳转

// 方式一
<router-link to="/home">跳转到首页</router-link>

// 方式二
import { useRouter } from "vue-router";
const router = useRouter();
 router.push("/home");

第八步：运行
yarn dev

路由动画

第一步：在App.vue中写上

       <router-view v-slot="{ Component }" >
        <transition name="fade">
            <component :is="Component" />
        </transition>
      </router-view>

第二步：App.vue编写css动画样式

<style scoped>
.fade-enter-from{   /* 进入时的透明度为0 和 刚开始进入时的原始位置通过active透明度渐渐变为1 */  
  opacity: 0;
  transform: translateX(-100%);
}
 
.fade-enter-to{   /*定义进入完成后的位置 和 透明度 */
  transform: translateX(0%);
  opacity: 1; 
}
 
.fade-leave-active,.fade-enter-active {
    transition: all 0.5s ease-out;
}
 
.fade-leave-from { /* 页面离开时一开始的css样式,离开后为leave-to，经过active渐渐透明 */
  transform: translateX(0%);
  opacity: 1;
}
 
.fade-leave-to{   /* 这个是离开后的透明度通过下面的active阶段渐渐变为0 */  
  transform: translateX(100%);
  opacity: 0;
}
</style>

vue3路由动画效果

路由鉴权（路由前置守卫）

配置路由文件

// 前置路由守卫
router.beforeEach((to, from, next) => {
    const isLogin = sessionStorage.getItem('token');
    // console.log(to.name);
    if (to.path == '/login') {
        next();
    } else {
        if (!isLogin) {
            next('/login')
        } else {
            next()
        }
    }
})