Vue에서 페이지 이동 및 액세스 권한을 처리하는 방법

// 安装和引入Vue Router
npm install vue-router
import VueRouter from 'vue-router'

// 定义组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 定义路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

// 创建router实例
const router = new VueRouter({
  routes
})

// 注册router实例
new Vue({
  router
}).$mount('#app')

// 在HelloWorld组件内部的一个方法中实现页面跳转
methods: {
  goToAbout() {
    this.$router.push('/about')
  }
}

// 定义路由
const routes = [
  { path: '/dashboard', component: Dashboard },
  { path: '/profile', component: Profile }
]

// 创建router实例
const router = new VueRouter({
  routes
})

// 使用全局的导航守卫
router.beforeEach((to, from, next) => {
  // 检查用户是否登录，如果未登录则跳转到登录页
  const isAuthenticated = checkAuthStatus()
  if (!isAuthenticated && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

// 注册router实例
new Vue({
  router
}).$mount('#app')

// 定义路由
const routes = [
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } },
  { path: '/profile', component: Profile }
]

// 创建router实例
const router = new VueRouter({
  routes
})

// 使用动态路由进行权限控制
router.beforeEach((to, from, next) => {
  // 检查目标页面是否需要登录权限
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检查用户是否登录，如果未登录则跳转到登录页
    const isAuthenticated = checkAuthStatus()
    if (!isAuthenticated) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

// 注册router实例
new Vue({
  router
}).$mount('#app')