Vue路由权限代码实现

Vue路由权限代码实现可以通过以下步骤实现：

1. 在Vue项目中安装vue-router插件，可以使用npm install vue-router命令进行安装。

2. 在router文件夹下创建一个index.js文件，用于定义路由。

3. 在index.js文件中定义路由，包括路由路径、组件、以及需要的权限等信息。

4. 在Vue组件中使用router-link标签进行路由跳转，可以使用v-if指令判断用户是否有权限访问该路由。

5. 在路由跳转前，可以使用beforeEach钩子函数进行权限验证，如果用户没有权限访问该路由，则跳转到登录页面或者其他页面。

以下是一个简单的Vue路由权限代码实现示例：

// index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
import Login from '@/components/Login'

Vue.use(Router)

const router = new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: {
requiresAuth: true
}
},
{
path: '/about',
name: 'About',
component: About,
meta: {
requiresAuth: false
}
},
{
path: '/login',
name: 'Login',
component: Login
}
]
})

router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!localStorage.getItem('token')) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})

export default router

// Home.vue

<template>
<div>
<h1>Home</h1>
<router-link to="/about" v-if="hasAccess">About</router-link>
</div>
</template>

<script>
export default {
name: 'Home',
computed: {
hasAccess () {
return localStorage.getItem('token')
}
}
}
</script>

// About.vue

<template>
<div>
<h1>About</h1>
</div>
</template>

<script>
export default {
name: 'About'
}
</script>

// Login.vue

<template>
<div>
<h1>Login</h1>
<button @click="login">Login</button>
</div>
</template>

<script>
export default {
name: 'Login',
methods: {
login () {
localStorage.setItem('token', '123456')
this.$router.push('/')
}
}
}
</script>