# VueRouter4

# VueRouter4的安装

路由的安装也是要要借助Vue脚手架，通过npm命令进行安装

注意

一般安装vue-router会安装最新版本，而Vue-router最新版本为4，但Vue-router4只能在Vue3中使用，所以Vue2只能用Vue-router3

# 安装命令

"@"符号后跟上VueRouter的版本

npm i vue-router@3

# VueRouter4的配置

在src根目录下创建router文件夹，新建index.js文件用于存储路由信息
在index.js文件中引入vuerouter的两个实例,路由和路由历史

import {createRouter, createWebHistory} from 'vue-router'

使用createRouter实例创建路由,并引入路由历史

const router = createRouter({
    history: createWebHistory()
})

引入组件

import Home from '../page/home.vue'
import Userlogin from '../page/Uerlogin.vue'

编写路由规则

import Home from '../page/home.vue'
import Userlogin from '../page/Uerlogin.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        //重定向的路由规则
        {path: '/', component: Userlogin},
        {name: 'login', path: "/login", component: Userlogin},
        {
            name: 'home', path: "/home", component: Home,
            children: [
                {name: 'order', path: "", component: Order},
                {path: "order", component: Order}
            ]
        },
    ]
})

向外共享路由实例

export default router

main.ts文件中引入路由

import router from './router/index'

在vue项目启动时将路由挂载到vue实例上

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

# 路由拦截器

路由拦截器通常用于用户在未登录情况重定向到用户登录界面

router.beforeEach((to, from, next) => {
    console.log('执行了拦截')
    let username: string = localStorage.getItem('userinfo') || '{}'
    console.log('用户数据', JSON.parse(username).adminNam)
    console.log('路由', to.path)
    if (to.path.indexOf('home') !== -1) {
        if (JSON.parse(username).adminNam) {
            next()
        } else {
            next('/login')
        }
    } else (next())
})

# 路由跳转动画

路由跳转动画实现主要依赖于vue中<transition></transition>标签

# 模板部分


<router-view v-slot="{ Component }">
    <transition appear
                mode="out-in"
                name="MainFade">
        <keep-alive>
            <component :is="Component"/>
        </keep-alive>
    </transition>
</router-view>

# css部分

.MainFade-enter-active {
    animation: move 0.5s;
}

@keyframes move {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}