Vue에서 동적 라우팅 및 라우팅 가드를 구현하는 방법

npm install vue-router

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: []
})

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

// 获取动态路由配置
// 假设通过接口获取到的路由数据为response.data
const dynamicRoutes = response.data

// 添加动态路由
router.addRoutes(dynamicRoutes)

export default router

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  const isLogin = localStorage.getItem('isLogin')

  // 如果用户未登录，并且访问的页面需要登录权限，则跳转至登录页
  if (!isLogin && to.meta.requireAuth) {
    next('/login')
  } else {
    next()
  }
})

export default router

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: { requireAdmin: true } // 设置路由元信息
    }
  ]
})

export default router

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: { requireAdmin: true } // 设置路由元信息
    }
  ]
})

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否为管理员
  const isAdmin = localStorage.getItem('isAdmin')

  // 如果用户不是管理员，并且访问的页面需要管理员权限，则跳转至首页
  if (!isAdmin && to.meta.requireAdmin) {
    next('/')
  } else {
    next()
  }
})

export default router

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

export default router

// App.vue
<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  // 组件内的守卫：每次路由切换后滚动到顶部
  beforeRouteUpdate(to, from, next) {
    window.scrollTo(0, 0)
    next()
  }
}
</script>