VueRouter4动态路由，路由守卫，权限控制

VueRouter4动态路由，路由守卫，权限控制

1、创建路由实例，定义公共路由router/index.ts

import { createRouter, createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

// 定义公共页面
export const constantRoutes = [
    {
        name: 'login',
        path: '/login',
        component: Login,
        meta: {
            title:'登录'
        }
    },
    {
        name: 'home',
        path: '/',
        component: Home,
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes: constantRoutes,
    // 滚动行为，切换页面就置顶
    scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

export default router

2、路由全局使用（main.ts）

import router from './router'
app.use(router)

3、路由守卫（router/permission.ts）

import router fro