首先看下项目目录:
vue中路由meta元信息实现权限控制步骤4步骤:
1.首先需要有一个登录页面组件:代码如下:Login.vue
2.创建两个组件:博客页面Blog.vue和笔记页面Notes.vue
3.在index.js里面挂载Blog.vue和Notes.vue,并添加meta属性。
4.在App.vue里面制定链接。
1.首先需要有一个登录页面组件:代码如下:Login.vue
//Login.vue内容
<template>
<div>
<h2>登录页面</h2>
<input type="text" v-model="user">
<input type="password" v-model="pwd">
<button @click='handleLogin'>登录</button>
</div>
</template>
<script>
export default {
data() {
return {
user: '',
pwd:''
};
},
methods:{
handleLogin(){
setTimeout(()=>{
let data={
user:this.user
}
localStorage.setItem('user',JSON.stringify(data));
this.$router.push({
path:this.$route.query.redirect
})
},1000)
}
}
}
</script>
<style lang="scss" scoped>
</style>
2.创建两个组件:博客页面Blog.vue和笔记页面Notes.vue
Blog.vue代码:
//Blog.vue内容
<template>
<div>
<h3>我的博客页面</h3>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
Notes.vue代码:
//Notes.vue内容
<template>
<div>
<h3>Notes页面</h3>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
3.在index.js里面挂载Blog.vue和Notes.vue,并添加meta属性。
index.js代码:
// index.js里面的内容
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
// import Posts from '@/views/Posts.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path:'/user',
name:'user',
component:()=>import('@/views/User.vue'),
// props:true,
children:[
{
path:'/posts',
component:()=>import('@/views/Posts')
},
{
path:'/profile',
component:()=>import('@/views/Profile')
}
]
},
{
path:'/editor',
name:'editor',
component:()=>import('@/views/Editor')
},
{
path:'/login',
name:'login',
component:()=>import('@/views/Login')
},
{ //3.在index.js里面挂载Blog.vue和Notes.vue,并添加meta属性。
path:'/blog',
name:'blog',
component:()=>import('@/views/Blog'),
meta:{
requireAuth:true
}
},
{
path:'/notes',
name:'notes',
component:()=>import('@/views/Notes'),
meta:{
requireAuth:true
}
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
//vue中路由meta元信息实现权限控制步骤4步骤:
//1.首先需要有一个登录页面组件:代码如下:Login.vue
//2.创建两个组件:博客页面Blog.vue和笔记页面Notes.vue
//3.在index.js里面挂载Blog.vue和Notes.vue,并添加meta属性。
//4.在App.vue里面制定链接。
4.在App.vue里面制定链接。
App.vue代码:
// App.vue里面的内容
<template>
<nav>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link> |
<router-link to='/user'>User</router-link> |
<router-link to='user/posts'>user/posts</router-link> |
<router-link to='user/profile'>user/profile</router-link> |
<router-link :to="{name:'editor'}">编辑</router-link> |
<router-link :to="{name:'blog'}">博客</router-link> | <!-- //4.在App.vue里面制定链接。 -->
<router-link :to="{name:'notes'}">笔记</router-link>
</nav>
<router-view/>
<!-- <router-view></router-view> -->
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
运行结果如下:
当用户点击博客或者笔记的时候,需要验证用户是否登录,如果用户登录,可以直接显示博客或者笔记页面,如果用户没有登录,则跳转到登录页面,用户登录成功之后,则直接跳转到博客或笔记页面。