VUE框架CLI组件化配置全局Router路由实现后置守卫修改页面抬头效果------VUE框架

已于 2023-12-25 14:15:31 修改
阅读量824 收藏 19
点赞数 23
分类专栏： # VUE框架 前端 文章标签： 前端 vue.js 前端框架 javascript ecmascript vue js
于 2023-12-20 14:55:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/135108205
版权 
// 导入vue-router对象
import VueRouter from "vue-router";
import Hebei from "../pages/hebei.vue";
import Henan from "../pages/henan.vue";
import City from "../pages/city.vue";
// 创建路由器对象(在这个路由器对象中配置路由)
const router = new VueRouter({
    // 在这里配置所有的路由规则
    routes : [
        // 这就是一个路由
        {
            // 路由由path和component组成
            // 这个看作key
            // 只要路径检测到的是/hebei就切换到这个组件
            path : "/hebei",
            // 这个就是路由的value,路由的value是一个组件
            component : Hebei,
            meta : {
                title : "河北省"
            },
            // children子路由
            children : [
                // 配置子路由
                {
                    // 对于子路由来说,path不用添加/,以/开始
                    // 系统会自动添加
                    // path : "/hebei/shijiazhuang",
                    name : "shi",
                    path : "sjz/:a1/:a2/:a3",
                    // :形式可以将后续的内容视为数据
                    component : City,
                    // 在路由中进行的配置
                    // props : {
                    //     x : 'Jack',
                    //     y : 'Rose'
                    // }
                    // props含有函数式写法
                    // props($route){
                    //     // 当前路由对象会被自动传递过来
                    //     // 将来取值时会自动调用函数
                    //     // 调用这个函数对象会获取到当前路由对象
                    //     return {
                    //         a1 : $route.params.a1,
                    //         a2 : $route.params.a2,
                    //         a3 : $route.params.a3
                    //     }
                    //     // 需要在方法最后返回对象
                    // }
                    // 这种方式只支持params方式的传参,不支持query方式
                    // 原理是将params直接内部转为props对象
                    props : true,
                    // 给路由对象添加自定义属性的话,需要在路由对象的meta路由源中定义
                    // 需要鉴权的属性
                    meta : {
                        isAuth : true,
                        title : "石家庄"
                    }
                },
                {
                    // 可以给路由起名字,用来防止过长导致path写一大串
                    name : "han",
                    // 数据是动态传过来的,我们只负责接收,所以两个子路由可以共享一个组件
                    path : "hd/:a1/:a2/:a3",
                    component : City,
                    // props($route){
                    //     return {
                    //         a1 : $route.params.a1,
                    //         a2 : $route.params.a2,
                    //         a3 : $route.params.a3
                    //     }
                    // }
                    props : true,
                    meta : {
                        isAuth : true,
                        title : "邯郸"
                    }
                }
            ]
        },
        {
            path : "/henan",
            component : Henan,
            meta : {
                title : '河南省'
            }
        }
    ]
});

// 全局前置守卫,在暴露之前创建之后即可
// beforeEach中的callback什么时候被调用呢,在每一次切换任意路由组件之前
// callback没有要求,可以是普通函数也可以是箭头函数
// from是一个路由对象
// callback函数有三个参数,to from next
// from是一个路由对象有name,path,component等属性就是上面的路由对象,这里表示的是起点路由
// to表示往哪去,也是一个路由对象,表示到哪去
// next参数是一个函数,调用这个函数以后,表示放行
router.beforeEach((to,from,next) => {
    // 页面初始化的时候,from和to相同
    // 每一次切换路由组件都会执行
    let loginName = "Jack";
    // 目前需要鉴定权限的路由少,如果多会导致这里繁琐
    if(to.meta.isAuth){
        if(loginName === "Rose"){
            // 有权限才修改名字
            // document.title = to.meta.title;
            // 放行
            next();
        }
        else{
            alert("您没有权限");
        } 
    }
    else{
        // 有权限才修改名字
        // document.title = to.meta.title;
        // 放行
        next();
    }
});

// 全局后置路由首位
// 初始化执行一次,以后每次切换执行一次,以后每一次切换任意一个路由组件调用一次
// 这个回调函数只有to和from,没有放行用的next
router.afterEach((to,from) => {
    // 相对于前置修改方式,切换动作稍慢一点,但是代码复用率更高,不会造成大量冗余
    // 短路或,初始值为false就执行后半句
    // 如果前面为true不考虑后面,因为前面有值而不是undefined(被视为false)
    document.title = to.meta.title || "欢迎使用本系统";
});

// 导出路由器对象
export default router;

// 导入vue-router对象

import VueRouter from "vue-router";

import Hebei from "../pages/hebei.vue";

import Henan from "../pages/henan.vue";

import City from "../pages/city.vue";

// 创建路由器对象(在这个路由器对象中配置路由)

const router = new VueRouter({

    // 在这里配置所有的路由规则

    routes : [

        // 这就是一个路由

        {

            // 路由由path和component组成

            // 这个看作key

            // 只要路径检测到的是/hebei就切换到这个组件

            path : "/hebei",

            // 这个就是路由的value,路由的value是一个组件

            component : Hebei,

            meta : {

                title : "河北省"

            },

            // children子路由

            children : [

                // 配置子路由

                {

                    // 对于子路由来说,path不用添加/,以/开始

                    // 系统会自动添加

                    // path : "/hebei/shijiazhuang",

                    name : "shi",

                    path : "sjz/:a1/:a2/:a3",

                    // :形式可以将后续的内容视为数据

                    component : City,

                    // 在路由中进行的配置

                    // props : {

                    //     x : 'Jack',

                    //     y : 'Rose'

                    // }

                    // props含有函数式写法

                    // props($route){

                    //     // 当前路由对象会被自动传递过来

                    //     // 将来取值时会自动调用函数

                    //     // 调用这个函数对象会获取到当前路由对象

                    //     return {

                    //         a1 : $route.params.a1,

                    //         a2 : $route.params.a2,

                    //         a3 : $route.params.a3

                    //     }

                    //     // 需要在方法最后返回对象

                    // }

                    // 这种方式只支持params方式的传参,不支持query方式

                    // 原理是将params直接内部转为props对象

                    props : true,

                    // 给路由对象添加自定义属性的话,需要在路由对象的meta路由源中定义

                    // 需要鉴权的属性

                    meta : {

                        isAuth : true,

                        title : "石家庄"

                    }

                },

                {

                    // 可以给路由起名字,用来防止过长导致path写一大串

                    name : "han",

                    // 数据是动态传过来的,我们只负责接收,所以两个子路由可以共享一个组件

                    path : "hd/:a1/:a2/:a3",

                    component : City,

                    // props($route){

                    //     return {

                    //         a1 : $route.params.a1,

                    //         a2 : $route.params.a2,

                    //         a3 : $route.params.a3

                    //     }

                    // }

                    props : true,

                    meta : {

                        isAuth : true,

                        title : "邯郸"

                    }

                }

            ]

        },

        {

            path : "/henan",

            component : Henan,

            meta : {

                title : '河南省'

            }

        }

    ]

});

// 全局前置守卫,在暴露之前创建之后即可

// beforeEach中的callback什么时候被调用呢,在每一次切换任意路由组件之前

// callback没有要求,可以是普通函数也可以是箭头函数

// from是一个路由对象

// callback函数有三个参数,to from next

// from是一个路由对象有name,path,component等属性就是上面的路由对象,这里表示的是起点路由

// to表示往哪去,也是一个路由对象,表示到哪去

// next参数是一个函数,调用这个函数以后,表示放行

router.beforeEach((to,from,next) => {

    // 页面初始化的时候,from和to相同

    // 每一次切换路由组件都会执行

    let loginName = "Jack";

    // 目前需要鉴定权限的路由少,如果多会导致这里繁琐

    if(to.meta.isAuth){

        if(loginName === "Rose"){

            // 有权限才修改名字

            // document.title = to.meta.title;

            // 放行

            next();

        }

        else{

            alert("您没有权限");

        }

    }

    else{

        // 有权限才修改名字

        // document.title = to.meta.title;

        // 放行

        next();

    }

});

// 全局后置路由首位

// 初始化执行一次,以后每次切换执行一次,以后每一次切换任意一个路由组件调用一次

// 这个回调函数只有to和from,没有放行用的next

router.afterEach((to,from) => {

    // 相对于前置修改方式,切换动作稍慢一点,但是代码复用率更高,不会造成大量冗余

    // 短路或,初始值为false就执行后半句

    // 如果前面为true不考虑后面,因为前面有值而不是undefined(被视为false)

    document.title = to.meta.title || "欢迎使用本系统";

});

// 导出路由器对象

export default router;

<template>
    <div>
        <MyHeader></MyHeader>
        <div>
            <!-- 因此对于我们普通的组件来说一共有九个回调函数 -->
            <!-- 八个生命周期和nextTick() -->
            <!-- nextTick在dom下一次渲染的时候执行 -->
            <!-- 路由组件还要多两个分别是激活和未激活两个钩子函数 -->
            <h1>省份</h1>
            <!-- 在默认的情况下,我们切换组件会导致原组件被销毁 -->
            <button @click="forward()">前进</button>
            <button @click="back()">后退</button>
            <button @click="forwardTwo()">前进2步</button>
            <button @click="backTwo()">后退2步</button>
            <ul>
                <!-- 如果使用的是路由方式,就不能使用a标签超链接了 -->
                <!-- 需要使用vue-router提供的标签router-link -->
                <!-- <li><a href="/hebei">河北省</a></li> -->
                <!-- <li><a href="/henan" class="selected">河南省</a></li> -->
                <!-- router-link将来会被自动编译为a标签 -->
                <!-- active-class点中激活,点中的时候激活这个样式 -->
                <li><router-link to="/hebei" active-class="selected">河北省</router-link></li>
                <li><router-link to="/henan" active-class="selected">河南省</router-link></li>
            </ul>
        </div>
        <!-- 路由视图,起到一个占位的作用 -->
        <!-- <keep-alive>
            这个标签下所有的组件在组件切换的时候都不会被杀死
            这个标签下所有的组件切换都不会遭到销毁
            <router-view></router-view>
        </keep-alive> -->
        <!-- <keep-alive include="Hebei"> -->
        <keep-alive :include="['Hebei','Henan']">
            <!-- 这样两个组件就都可以保持了 -->
            <!-- 把组件的配置的name属性下的名字放到这里可以保证这个组件切换不被杀死 -->
            <!-- 这个组件不会被销毁,会保留状态 -->
            <!-- 如果需要保持多个组件的状态则应该给予一个数组 -->
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
export default {
    name : "App",
    components : {MyHeader},
    methods : {
        forward(){
            this.$router.forward();
        },
        back(){
            this.$router.back();
        },
        forwardTwo(){
            this.$router.go(2);
        },
        backTwo(){
            this.$router.go(-2);
        }
    }
}
</script>

<style>
    .s1{
        margin-left: 100px;
    }
    .s2{
        margin-left: 100px;
    }
    .selected{
        background-color: aqua;
    }
</style>

<template>

    <div>

        <MyHeader></MyHeader>

        <div>

            <!-- 因此对于我们普通的组件来说一共有九个回调函数 -->

            <!-- 八个生命周期和nextTick() -->

            <!-- nextTick在dom下一次渲染的时候执行 -->

            <!-- 路由组件还要多两个分别是激活和未激活两个钩子函数 -->

            <h1>省份</h1>

            <!-- 在默认的情况下,我们切换组件会导致原组件被销毁 -->

            <button @click="forward()">前进</button>

            <button @click="back()">后退</button>

            <button @click="forwardTwo()">前进2步</button>

            <button @click="backTwo()">后退2步</button>

            <ul>

                <!-- 如果使用的是路由方式,就不能使用a标签超链接了 -->

                <!-- 需要使用vue-router提供的标签router-link -->

                <!-- <li><a href="/hebei">河北省</a></li> -->

                <!-- <li><a href="/henan" class="selected">河南省</a></li> -->

                <!-- router-link将来会被自动编译为a标签 -->

                <!-- active-class点中激活,点中的时候激活这个样式 -->

                <li><router-link to="/hebei" active-class="selected">河北省</router-link></li>

                <li><router-link to="/henan" active-class="selected">河南省</router-link></li>

            </ul>

        </div>

        <!-- 路由视图,起到一个占位的作用 -->

        <!-- <keep-alive>

            这个标签下所有的组件在组件切换的时候都不会被杀死

            这个标签下所有的组件切换都不会遭到销毁

            <router-view></router-view>

        </keep-alive> -->

        <!-- <keep-alive include="Hebei"> -->

        <keep-alive :include="['Hebei','Henan']">

            <!-- 这样两个组件就都可以保持了 -->

            <!-- 把组件的配置的name属性下的名字放到这里可以保证这个组件切换不被杀死 -->

            <!-- 这个组件不会被销毁,会保留状态 -->

            <!-- 如果需要保持多个组件的状态则应该给予一个数组 -->

            <router-view></router-view>

        </keep-alive>

    </div>

</template>

<script>

import MyHeader from "./components/MyHeader";

export default {

    name : "App",

    components : {MyHeader},

    methods : {

        forward(){

            this.$router.forward();

        },

        back(){

            this.$router.back();

        },

        forwardTwo(){

            this.$router.go(2);

        },

        backTwo(){

            this.$router.go(-2);

        }

    }

}

</script>

<style>

    .s1{

        margin-left: 100px;

    }

    .s2{

        margin-left: 100px;

    }

    .selected{

        background-color: aqua;

    }

</style>

<template>
    <h1>路由与路由器</h1>
</template>

<script>
export default {
    name : "MyHeader"
}
</script>

<style>

</style>

<template>

    <h1>路由与路由器</h1>

</template>

<script>

export default {

    name : "MyHeader"

}

</script>

<style>

</style>

<template>
    <div>
        <!-- 组件分为普通组件和路由组件 -->
        <div class="s1">
            <!-- 栈数据结构 -->
            <!-- stack栈一种数据结构,当我们的元素进入称为入栈,或压栈push -->
            <!-- 进入的第一个元素在栈底部的我们称之为栈底元素 -->
            <!-- 默认情况下,栈当中是一个指针的,这个指针在默认情况下指向栈顶元素 -->
            <!-- 每次有新的元素入栈后,栈的指针都会自动向上移动指向栈顶的那个元素 --> 
            <!-- 栈顶元素先出栈,出栈,弹栈pop -->
            <!-- 栈数据结构特点,遵循先进后出,后进先出原则 -->
            <h2>市区</h2>
            <ul>
                <li>洛阳</li>
                <li>开封</li>
                <li>安阳</li>
                <li>郑州</li>
            </ul>
            <!-- 浏览器的历史记录就是存在栈这种数据结构里面的 -->
            <!-- 历史记录存放到栈有两种不同的模式 -->
            <!-- 第一种,push模式 -->
            <!-- 以追加的方式入栈 -->
            <!-- 第二种,replace模式 -->
            <!-- 以替换栈顶元素的方式入栈 -->
            <!-- 浏览器默认的模式是push模式 -->
            <!-- 操作浏览器上的前进后退并不会删除栈当中的历史记录,只是向前和向后移动指针 -->
            <!-- 只是移动了指针指向的元素 -->
            <!-- 栈内的元素没有发生变化,变化的只有指针位置 -->
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name : "Henan",
    beforeDestroy(){
        console.log("啊,组件去世了!")
    },
}
</script>

<style>

</style>

<template>

    <div>

        <!-- 组件分为普通组件和路由组件 -->

        <div class="s1">

            <!-- 栈数据结构 -->

            <!-- stack栈一种数据结构,当我们的元素进入称为入栈,或压栈push -->

            <!-- 进入的第一个元素在栈底部的我们称之为栈底元素 -->

            <!-- 默认情况下,栈当中是一个指针的,这个指针在默认情况下指向栈顶元素 -->

            <!-- 每次有新的元素入栈后,栈的指针都会自动向上移动指向栈顶的那个元素 -->

            <!-- 栈顶元素先出栈,出栈,弹栈pop -->

            <!-- 栈数据结构特点,遵循先进后出,后进先出原则 -->

            <h2>市区</h2>

            <ul>

                <li>洛阳</li>

                <li>开封</li>

                <li>安阳</li>

                <li>郑州</li>

            </ul>

            <!-- 浏览器的历史记录就是存在栈这种数据结构里面的 -->

            <!-- 历史记录存放到栈有两种不同的模式 -->

            <!-- 第一种,push模式 -->

            <!-- 以追加的方式入栈 -->

            <!-- 第二种,replace模式 -->

            <!-- 以替换栈顶元素的方式入栈 -->

            <!-- 浏览器默认的模式是push模式 -->

            <!-- 操作浏览器上的前进后退并不会删除栈当中的历史记录,只是向前和向后移动指针 -->

            <!-- 只是移动了指针指向的元素 -->

            <!-- 栈内的元素没有发生变化,变化的只有指针位置 -->

        </div>

        <router-view></router-view>

    </div>

</template>

<script>

export default {

    name : "Henan",

    beforeDestroy(){

        console.log("啊,组件去世了!")

    },

}

</script>

<style>

</style>

<template>
    <div>
        <!-- 组件分为普通组件和路由组件 -->
        <div class="s2">
            <h2>县区</h2>
            <ul>
                <!-- query形式接收 -->
                <!-- <li>{{ $route.query.a1 }}</li>
                <li>{{ $route.query.a2 }}</li>
                <li>{{ $route.query.a3 }}</li> -->
                <!-- params形式接收 -->
                <li>{{ a1 }}</li>
                <li>{{ a2 }}</li>
                <li>{{ a3 }}</li>
                <!-- 遍历query的方式 -->
                <!-- <li v-for="propertyValue,propertyName in $route.query" :key="propertyName">{{ propertyValue }}</li> -->
                <!-- 遍历params的方式 -->
                <!-- <li v-for="propertyValue,propertyName in $route.params" :key="propertyName">{{ propertyValue }}</li> -->
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name : "City",
    // 因为我们的组件是通过路由唤醒的,因此路由会把这个配置props传递过来
    // 我们就可以在这里拿到props
    props : ['a1','a2','a3'],
    mounted(){
        // 所有的路由组件都有一个$route,通过这个属性可以获取到路由组件关联的路由对象
        console.log(this.$route);
        // 路由对象中有一个query属性,通过这个query属性可以接收到query方式传过来的数据
        console.log(this.$route.query);
        // 接收的params数据
        console.log(this.$route.params);
    },
    // 使用计算属性的方式
    computed : {
        params(){
            return this.$route.params;
        }
    }
}
</script>

<style>

</style>

<template>

    <div>

        <!-- 组件分为普通组件和路由组件 -->

        <div class="s2">

            <h2>县区</h2>

            <ul>

                <!-- query形式接收 -->

                <!-- <li>{{ $route.query.a1 }}</li>

                <li>{{ $route.query.a2 }}</li>

                <li>{{ $route.query.a3 }}</li> -->

                <!-- params形式接收 -->

                <li>{{ a1 }}</li>

                <li>{{ a2 }}</li>

                <li>{{ a3 }}</li>

                <!-- 遍历query的方式 -->

                <!-- <li v-for="propertyValue,propertyName in $route.query" :key="propertyName">{{ propertyValue }}</li> -->

                <!-- 遍历params的方式 -->

                <!-- <li v-for="propertyValue,propertyName in $route.params" :key="propertyName">{{ propertyValue }}</li> -->

            </ul>

        </div>

    </div>

</template>

<script>

export default {

    name : "City",

    // 因为我们的组件是通过路由唤醒的,因此路由会把这个配置props传递过来

    // 我们就可以在这里拿到props

    props : ['a1','a2','a3'],

    mounted(){

        // 所有的路由组件都有一个$route,通过这个属性可以获取到路由组件关联的路由对象

        console.log(this.$route);

        // 路由对象中有一个query属性,通过这个query属性可以接收到query方式传过来的数据

        console.log(this.$route.query);

        // 接收的params数据

        console.log(this.$route.params);

    },

    // 使用计算属性的方式

    computed : {

        params(){

            return this.$route.params;

        }

    }

}

</script>

<style>

</style>

旧约Alatus
关注
  • 23
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【精讲】vue框架 路由守卫（前后置）入门
m0_59505309的博客
08-18 665
【精讲】vue框架 路由守卫（前后置）入门
前置路由守卫和后置路由守卫
m0_65132206的博客
05-28 4101
路由前置/后置守卫的作用及语法
Vue2.0 Vue路由 全局后置路由守卫
yasinawolaopo的博客
01-12 1331
全局后置守卫:初始化时执行、每次路由切换后执行
router路由守卫，前置路由守卫，后置路由守卫，都享路由守卫，组件路由守卫，auth路由设置是否需要登录，路由工作模式history模式和hash模式的理解
艾米的猫儿的博客
11-19 879
1.全局前置路由守卫 废话得听： 路由跳转之前执行 有三个返回参数 to, from, next router.beforeEach((to, from, next) => { console.log(to,from) next() // 放行可以可以跳转的意思 }) 2.全局后置路由守卫 废话得听： 路由跳转之前执行，后置路由守卫没有next 只有to from router.afterEach((to, from) => { console.log(to,fro.
vue 全局后置路由守卫router.afterEach
MCCLS的博客
07-31 3743
要点： 发现后置路由守卫在前置之后执行,并且发现next为undefined 则后置守卫没有next因为它已经是在路由跳转后了没必要进行路由跳转的放行了 而后置路由守卫实现页签的改变 我们先用js来实现 先在mate里面写上对应信息 这边我们写在了前置路由守卫里面 但发现有bug一开始打开的网页为undefined 但是还有bug 因为是路径跳转前改变,所以当信息不对权限没通过,但是会发生网页页签的改变, 只有这样写,前置守卫才没有b...
Vue-router 类似Vuex实现组件化开发的示例
08-29
本篇文章主要介绍了Vue-router 类似Vuex实现组件化开发的示例，具有一定的参考价值，有兴趣的可以了解一下
vue实现权限控制路由(vue-router 动态添加路由)
12-13
二、动态配置路由，这里是把所有组件中相应的路由配置成一个个的对象，根据后台返回的菜单tree一个个去匹配。 三、通过匹配，把匹配好的路由数据addRoutes到路由中。 四、为了防止刷新页面后路由数据被清空，这里...
vue-cli+webpack记事本项目创建
11-27
vue-cli+webpack记事本项目使用的是vue-cli2.0里面的项目构建工具webpack 项目的准备工作： 1.了解vue2.0 2.了解一些ES6 3.储备一些webpack知识 参照项目地址：vue2.0构建单页应用最佳实战 我们将会选择使用一些vue...
Vue应用框架整合与实战--框架整合(通用)篇
03-01
使用Vue.js，我们已经可以通过组合组件来组成应用程序，当你要把vue-router添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉vue-router在哪里渲染它们。如果在一个模块化工程中使用它，...
解决VUE-Router 同一页面第二次进入不刷新的问题
11-20
最近正好遇到一个问题，修改用户的头像，修改后再进入用户主页，发现改了之后即使数据变了。。页面也不会重新渲染。。。 下面提供几种解决方案来给予大家参考： 1. 可以在刷新的页面定义一个参数, 这样每次都会渲染...
路由守卫详细讲解
m0_72642533的博客
02-09 1488
路由守卫：全局前置守卫、全局后置守卫、组件内部守卫、组件独享守卫
Vue——路由守卫（全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 ）
weixin_51351637的博客
09-22 1万+
作用：对路由进行权限控制分类：全局守卫、独享守卫、组件内守卫。
Vue路由守卫（导航守卫）及使用场景
热门推荐
m0_65558076的博客
12-29 1万+
目录 前言 一、路由守卫是什么？ 二、路由守卫全解析 先来看一下钩子函数执行后输出的顺序吧 1.全局路由守卫 2.组件路由守卫 3.路由独享守卫 单独介绍一下路由守卫钩子三个参数 前言 最近在学习vue路由守卫，感觉路由守卫这里知识点挺多的，来做个小笔记。 一、路由守卫是什么？ 路由守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路.
Vue3 全局路由的使用
最新发布
Heidi
08-28 653
【代码】Vue3 全局路由的使用。
路由的前置路由守卫和后置路由守卫
li_ge_DD的博客
12-07 3398
afterEach beforeEach这两个导航守卫的区别 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 beforeEach全局前置守卫当一个导航触发时，全局前置守卫按照创建顺序调用。 每个守卫方法接收三个参数： to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖
路由守卫汇总
m0_62555895的博客
12-04 416
vue
Vue之路由守卫
niulinbiao的博客
08-06 692
一、理解 路由导航守卫是为了路由跳转之前做的检查及操作 比如：用户没有登录 而是直接通过修改浏览器 url 来访问网页，这种操作无疑是不安全的。路由导航守卫可以让我们对用户要跳转的路由做一次检查，符合条件后放行，不符合条件则强制用户跳转登录页面。 二、分类 全局守卫、独享守卫、组件内守卫 2.1、全局守卫 写在路由配置的地方index.js //全局前置守卫：初始化时执行、每次路由切换前执行 router.beforeEach((to,from,next)=>{ console.log('befor
路由守卫总结(全局守卫、后置钩子、路由独享守卫、组建内守卫)
zezeadede555的博客
03-10 2345
路由守卫 路由独享守卫(beforeEach) main.js中进行配置//路由守卫 router.beforeEach((to, from, next) =&gt; { if (to.path == '/login' || to.path == '/register') { next(); } else { alert("还没有登录") next("/login"...
Vue.js——路由全局前置&后置守卫(钩子)
五柳
08-18 6889
前言： 不知不觉走在编程的路上已经一个年头多些，在自学的前部分时间都在看别人写的程序。最近这几个月几乎都在自己捣鼓程序…导致很少去吸收别人写的程序的优点。回到正题~最近在玩vue社区的一个很有名的框架iView，并且也在看它生态中的iView Admin模板。刚开始就掉坑了… 全局前置守卫（钩子） 基础语法： const router = new VueRouter({ ... }) rou...
使用 Vue-Router 进行路由管理，匹配各功能组件进行模块化开发；
04-19
非常好的问题！我可以告诉你，Vue-Router 是一个基于 Vue.js 的插件，可以帮助开发者实现前端路由管理。...通过 Vue-Router，你可以将你的应用程序的各个组件进行模块化开发，从而实现更好的代码复用和可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旧约Alatus

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值