vue3学习笔记（15）router路由高级使用 路由守卫

Vue3专栏入口

一、vuex + 路由守卫模拟权限设置

界面一共两个主要按钮Home和About，在about下还有子路由，上排为message下排为news,需要给这8个子路由添加权限模拟。

目录结构

1.1页面编写和基础配置

1.1.1 pages/About.vue

<template>
    <div class="about">
        <h1>About</h1>
        <h3>接收到的About参数为:{{ id }}</h3>
        <div class="button">
            <button class="b" v-for="(i, index) in message" :key="index" @click="button_click_m(i)">{{ i }}</button>
        </div>
        <div class="button">
            <button class="b" v-for="(i, index) in news" :key="index" @click="button_click_n(i)">{{ i }}</button>
        </div>
        <router-view></router-view>
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import router from '../router';

export default defineComponent({

    name: 'About',
    props: ["id"],

    setup(props, context) {
        const message = [1, 2, 3, 4]
        const news = [1, 2, 3, 4]
        const routes = {
            // News 按钮
            button_click_n: (i) => {
                router.push({
                    name: "News",
                    params: {
                        id: props.id,
                        title: i
                    }
                })
            },
            // message 按钮
            button_click_m: (i) => {
                router.push({
                    name: "Message",
                    params: {
                        id: props.id,
                        message: i
                    }
                })
            },
        }

        return {
            message,
            news,
            ...routes
        }
    }
})
</script>

<style scoped>
.about {
    background-color: rgb(255, 145, 0);
    width: 500px;
    height: 500px;
}

.button {
    display: flex;
    justify-content: space-around;
}

.b {
    width: 50px;
    height: 50px;
}
</style>

1.1.2 pages/Home.vue

<template>
    <div class="home">
        <h1>Home</h1>
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue'

export default defineComponent({
    name: 'Home',
    setup(props, context) {

    }
})
</script>

<style scoped>
.home{
    background-color: antiquewhite;
    width: 500px;
    height: 500px;
}
</style>

1.1.3 pages/Message.vue

<template>
    <div>
        Message
        <h1>{{message}}</h1>
        <h1>{{id}}</h1>
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue'

export default defineComponent({
    name: 'Message',
    props:["message","id"],
    setup(props, context) {

    }
})
</script>

<style scoped>
</style>

1.1.4 pages/News.vue

<template>
    <div>
        News
        <h1>{{id}}</h1>
        <h1>{{title}}</h1>
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue'

export default defineComponent({
    name: 'News',
    props:["id","title"],
    setup(props, context) {

    }
})
</script>

<style scoped>
</style>

1.1.5 App.vue

<template>

	<button @click="Home"> Home </button>
	<button @click="About">About</button>
	<router-view></router-view>

</template>

<script lang="ts">

import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import router from './router'

export default defineComponent({
	name: 'App',
	setup(props, context) {
		// 路由集合
		const routes = {

			// Home
			Home: (() => {
				router.push({
					name: 'Home'
				})
			}),

			// About
			About: (() => {
				router.push({
					name: 'About',
					params: {
						id: 12
					}
				})
			})
		}

		return {
			...routes
		}
	}
})
</script>

<style scoped>
.app {
	background-color: antiquewhite;
	width: 500px;
	height: 500px;
}
</style>

1.1.6 main.js

import { createApp } from 'vue'
import App from './App.vue'
import routers from './router'

const app = createApp(App)
app.use(routers)
app.mount('#app')

1.2路由编写 router/index.js

在这个js中我们配置了路由守卫 router.beforeEach()

import { createRouter, createWebHistory } from 'vue-router'

import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import Message from '../pages/Message.vue'
import News from '../pages/News.vue'
import App from '../App.vue'
import store from '../store'

const routes = [{
    name: 'Home',
    path: '/',
    component: Home
}, {
    name: 'About',
    path: '/about/:id',
    component: About,
    props: true,
    children: [{
        name: 'News',
        path: '/about/news/:id/:title',
        component: News,
        props: true,
        meta: { isAuth: true }
    }, {
        name: 'Message',
        path: '/about/message/:id/:message',
        component: Message,
        props: true,
        meta: { isAuth: true }
    }]
}]

const router = createRouter({
        history: createWebHistory(),
        routes: routes
    })
    // 全局前置守卫
router.beforeEach((to, from, next) => {
    if (to.meta.isAuth) {
        // 如果需要验证则判断身份
        if (store.state.auth == "admin") {
            next()
        } else {
            alert("权限不足")
        }
    } else {
        // 不需要就直接next
        next()
    }
})

// 全局后置守卫
router.afterEach((to, from) => {
    // 根据进入的页面进行修改title
    document.title = to.name
})
export default router

1.3 vuex权限存储 store/index.js

我们使用state直接对身份进行了存储修改后则会失去权限

import { createStore } from "vuex";

export default createStore({
    // 数据存储
    state: {
        // 身份模拟
        auth: "admin"
    },
    // 操作数据
    mutation: {

    },
    actions: {

    },
    getters: {

    }
})