VUE框架CLI组件化配置Router栈数据结构原理编程式路由导航实现------VUE框架

已于 2023-12-25 14:12:57 修改
阅读量910 收藏 15
点赞数 24
分类专栏： # VUE框架 前端 文章标签： 前端 javascript ecmascript vue.js vue 前端框架 数据结构
于 2023-12-19 15:46:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/135086604
版权 
<template>
    <div>
        <MyHeader></MyHeader>
        <div>
            <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>
        <!-- 路由视图,起到一个占位的作用 -->
        <router-view></router-view>
    </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>

            <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>

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

        <router-view></router-view>

    </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>

// 导入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,
            // 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
                },
                {
                    // 可以给路由起名字,用来防止过长导致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
                }
            ]
        },
        {
            path : "/henan",
            component : Henan
        }
    ]
});
// 导出路由器对象
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,

            // 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

                },

                {

                    // 可以给路由起名字,用来防止过长导致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

                }

            ]

        },

        {

            path : "/henan",

            component : Henan

        }

    ]

});

// 导出路由器对象

export default router;

<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>

<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"
}
</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"

}

</script>

<style>

</style>

<template>
    <div>
        <!-- 组件分为普通组件和路由组件 -->
        <div class="s1">
            <!-- router-link被称为声明式的路由导航,只适合超链接一种形式 -->
            <h2>市区</h2>
            <ul>
                <!-- 写死信息方式传递 -->
                <!-- <li><router-link to="/hebei/city?a1=新华区&a2=裕华区&a3=长安区" active-class="selected">石家庄</router-link></li>
                <li><router-link to="/hebei/city?a1=邯山区&a2=丛台区&a3=复兴区" active-class="selected">邯郸</router-link></li> -->
                <!-- 动态拼接字符串形式传递 -->
                <!-- <li><router-link :to="`/hebei/city?a1=${sjz[0]}&a2=${sjz[1]}&a3=${sjz[2]}`" active-class="selected">石家庄</router-link></li>
                <li><router-link :to="`/hebei/city?a1=${hd[0]}&a2=${hd[1]}&a3=${hd[2]}`" active-class="selected">邯郸</router-link></li> -->
                <!-- <li>
                    // 对象形式传参实现
                    <router-link active-class="selected" :to="{
                        // name的形式不支持字符串拼接,只支持对象形式
                        // 因为子组件有了名字,就可以写名字而不是path地址嵌套了
                        name : 'shi',
                        // path : '/hebei/sjz',
                        query : {
                            a1 : sjz[0],
                            a2 : sjz[1],
                            a3 : sjz[2]
                        }
                    }">石家庄
                    </router-link>
                </li> -->
                <!-- 写死的形式 -->
                <!-- <li>
                    <router-link active-class="selected" to="/hebei/sjz/裕华区/新华区/长安区">
                    石家庄
                    </router-link>
                </li> -->
                <!-- 拼接的形式 -->
                <!-- <li>
                    <router-link active-class="selected" :to="`/hebei/sjz/${sjz[0]}/${sjz[1]}/${sjz[2]}`">
                    石家庄
                    </router-link>
                </li> -->
                <!-- 对象形式params传参 -->
                <li>
                    <!-- 当我们在router-link中设置replace=true的时候,就可以开启replace模式 -->
                    <!-- 实际上是push加replace模式 -->
                    <!-- 这个带有replace标签的route-link会替代栈顶部的标签元素 -->
                    <router-link :replace="true" active-class="selected" :to="{
                        // params形式传参,不能有path
                        // 这里只能使用name 
                        // path : '/hebei/sjz',
                        name : 'shi',
                        params : {
                            a1 : sjz[0],
                            a2 : sjz[1],
                            a3 : sjz[2]
                        }
                    }">
                    石家庄
                    </router-link>
                    <button @click="goSjz()">石家庄</button>
                </li>
                <!-- <li>
                    <router-link active-class="selected" :to="{
                        // 全都用名字来代替
                        name : 'han',
                        // path : '/hebei/hd',
                        query : {
                            a1 : hd[0],
                            a2 : hd[1],
                            a3 : hd[2]
                        }
                    }">邯郸
                    </router-link>
                </li> -->
                <!-- 字符串拼接形式 -->
                <!-- <li>
                    <router-link active-class="selected" to="/hebei/hd/邯山区/丛台区/复兴区">邯郸
                    </router-link>
                </li> -->
                <!-- params字符串拼接方式实现 -->
                <!-- <li>
                    <router-link active-class="selected" :to="`/hebei/hd/${hd[0]}/${hd[1]}/${hd[2]}`">邯郸
                    </router-link>
                </li> -->
                <!-- params对象形式实现 -->
                <li>
                    <router-link replace active-class="selected" :to="{
                        name : 'han',
                        params : {
                            a1 : hd[0],
                            a2 : hd[1],
                            a3 : hd[2]
                        }
                    }">邯郸
                    </router-link>
                    <button @click="goHD()">邯郸</button>
                </li>
                <li>保定</li>
                <li>唐山</li>
            </ul>
        </div>
        <!-- 区组件 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name : "Hebei",
    data(){
        return {
            sjz : ["新华区","裕华区","长安区"],
            hd : ["邯山区","丛台区","复兴区"]
        }
    },
    methods : {
        goSjz(){
            // 在这里编写代码完成组件的切换
            // 这种通过编程的方式完成组件切换被称为:编程式路由导航
            // 调用现有的api就可以完成路由组件的切换
            // 首先我们需要获取路由器对象,不是路由对象this.$route是路由对象
            // this.$router这样就可以获取到共享的路由器对象,一般一个项目只有一个
            this.$router.push({
                // params形式传参,不能有path
                // 这里只能使用name 
                // path : '/hebei/sjz',
                name : 'shi',
                params : {
                    a1 : this.sjz[0],
                    a2 : this.sjz[1],
                    a3 : this.sjz[2]
                }
                // 正常来说需要编写这两个函数,一个是成功一个是失败
            },() => {},() => {});
        },
        goHD(){
            // 这个为replace模式
            // 同级的我们考虑使用replace切换
            this.$router.replace({
                name : 'han',
                // 在我们使用编程式的路由导航的时候
                // push或者promise会返回一个Promise对象
                // Promise对象期望你能通过参数的方式给它两个回调函数,一个是成功的回调函数
                // 一个是失败的回调函数
                // 如果没有给出这两个回调函数,则会爆出这个错误
                // 在参数上给出两个回调函数即可
                params : {
                    a1 : this.hd[0],
                    a2 : this.hd[1],
                    a3 : this.hd[2]
                }
            },() => {},() => {});
        }
    }
}
</script>

<style>

</style>

<template>

    <div>

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

        <div class="s1">

            <!-- router-link被称为声明式的路由导航,只适合超链接一种形式 -->

            <h2>市区</h2>

            <ul>

                <!-- 写死信息方式传递 -->

                <!-- <li><router-link to="/hebei/city?a1=新华区&a2=裕华区&a3=长安区" active-class="selected">石家庄</router-link></li>

                <li><router-link to="/hebei/city?a1=邯山区&a2=丛台区&a3=复兴区" active-class="selected">邯郸</router-link></li> -->

                <!-- 动态拼接字符串形式传递 -->

                <!-- <li><router-link :to="`/hebei/city?a1=${sjz[0]}&a2=${sjz[1]}&a3=${sjz[2]}`" active-class="selected">石家庄</router-link></li>

                <li><router-link :to="`/hebei/city?a1=${hd[0]}&a2=${hd[1]}&a3=${hd[2]}`" active-class="selected">邯郸</router-link></li> -->

                <!-- <li>

                    // 对象形式传参实现

                    <router-link active-class="selected" :to="{

                        // name的形式不支持字符串拼接,只支持对象形式

                        // 因为子组件有了名字,就可以写名字而不是path地址嵌套了

                        name : 'shi',

                        // path : '/hebei/sjz',

                        query : {

                            a1 : sjz[0],

                            a2 : sjz[1],

                            a3 : sjz[2]

                        }

                    }">石家庄

                    </router-link>

                </li> -->

                <!-- 写死的形式 -->

                <!-- <li>

                    <router-link active-class="selected" to="/hebei/sjz/裕华区/新华区/长安区">

                    石家庄

                    </router-link>

                </li> -->

                <!-- 拼接的形式 -->

                <!-- <li>

                    <router-link active-class="selected" :to="`/hebei/sjz/${sjz[0]}/${sjz[1]}/${sjz[2]}`">

                    石家庄

                    </router-link>

                </li> -->

                <!-- 对象形式params传参 -->

                <li>

                    <!-- 当我们在router-link中设置replace=true的时候,就可以开启replace模式 -->

                    <!-- 实际上是push加replace模式 -->

                    <!-- 这个带有replace标签的route-link会替代栈顶部的标签元素 -->

                    <router-link :replace="true" active-class="selected" :to="{

                        // params形式传参,不能有path

                        // 这里只能使用name

                        // path : '/hebei/sjz',

                        name : 'shi',

                        params : {

                            a1 : sjz[0],

                            a2 : sjz[1],

                            a3 : sjz[2]

                        }

                    }">

                    石家庄

                    </router-link>

                    <button @click="goSjz()">石家庄</button>

                </li>

                <!-- <li>

                    <router-link active-class="selected" :to="{

                        // 全都用名字来代替

                        name : 'han',

                        // path : '/hebei/hd',

                        query : {

                            a1 : hd[0],

                            a2 : hd[1],

                            a3 : hd[2]

                        }

                    }">邯郸

                    </router-link>

                </li> -->

                <!-- 字符串拼接形式 -->

                <!-- <li>

                    <router-link active-class="selected" to="/hebei/hd/邯山区/丛台区/复兴区">邯郸

                    </router-link>

                </li> -->

                <!-- params字符串拼接方式实现 -->

                <!-- <li>

                    <router-link active-class="selected" :to="`/hebei/hd/${hd[0]}/${hd[1]}/${hd[2]}`">邯郸

                    </router-link>

                </li> -->

                <!-- params对象形式实现 -->

                <li>

                    <router-link replace active-class="selected" :to="{

                        name : 'han',

                        params : {

                            a1 : hd[0],

                            a2 : hd[1],

                            a3 : hd[2]

                        }

                    }">邯郸

                    </router-link>

                    <button @click="goHD()">邯郸</button>

                </li>

                <li>保定</li>

                <li>唐山</li>

            </ul>

        </div>

        <!-- 区组件 -->

        <router-view></router-view>

    </div>

</template>

<script>

export default {

    name : "Hebei",

    data(){

        return {

            sjz : ["新华区","裕华区","长安区"],

            hd : ["邯山区","丛台区","复兴区"]

        }

    },

    methods : {

        goSjz(){

            // 在这里编写代码完成组件的切换

            // 这种通过编程的方式完成组件切换被称为:编程式路由导航

            // 调用现有的api就可以完成路由组件的切换

            // 首先我们需要获取路由器对象,不是路由对象this.$route是路由对象

            // this.$router这样就可以获取到共享的路由器对象,一般一个项目只有一个

            this.$router.push({

                // params形式传参,不能有path

                // 这里只能使用name

                // path : '/hebei/sjz',

                name : 'shi',

                params : {

                    a1 : this.sjz[0],

                    a2 : this.sjz[1],

                    a3 : this.sjz[2]

                }

                // 正常来说需要编写这两个函数,一个是成功一个是失败

            },() => {},() => {});

        },

        goHD(){

            // 这个为replace模式

            // 同级的我们考虑使用replace切换

            this.$router.replace({

                name : 'han',

                // 在我们使用编程式的路由导航的时候

                // push或者promise会返回一个Promise对象

                // Promise对象期望你能通过参数的方式给它两个回调函数,一个是成功的回调函数

                // 一个是失败的回调函数

                // 如果没有给出这两个回调函数,则会爆出这个错误

                // 在参数上给出两个回调函数即可

                params : {

                    a1 : this.hd[0],

                    a2 : this.hd[1],

                    a3 : this.hd[2]

                }

            },() => {},() => {});

        }

    }

}

</script>

<style>

</style>

旧约Alatus
关注
  • 24
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue顶部导航项目框架
u014084915的博客
09-16 456
gitt手机验证码登录搜索vue顶部导航下载项目文件安装VS Code 汉化NodeJS的安装，vscode的终端输入node -v 出现node的版本号说明node安装成功。将文件夹拖入若不行，就“文件”–>“打开文件夹”
详解Vue-Router源码分析路由实现原理
10-16
总的来说，Vue-Router通过组件化、生命周期管理和URL同步实现了SPA（单页应用程序）的路由管理。了解其源码实现原理，可以帮助开发者更高效地使用和自定义Vue-Router，提升项目开发的灵活性和可维护性。通过阅读源码...
路由导航守卫 [前端][Vue框架]
m0_57001006的博客
07-16 288
②在beforeRouteEnter守卫的回调函数中不能获取组件实例,,也就是在beforeRouterEnter守卫回调函数中不能使用this获取到vue实例。next是拦截对象,如果调用next()则会正常跳转到to.path所指的路径中(也就是条跳转到to所指的页面中)③next({path页面path})和②其实是一样的,可以说②就是③的一种简化书写方式。①next(false)表示不跳转页面,与不调用next的功能是一致的。to代表的是跳转的目标页面。...
Vue框架之编程式导航
宅羽的博客
01-21 326
◆ 页面导航的两种方式： 声明式导航：通过点击链接的方式实现的导航 编程式导航：调用js的api方法实现导航 ◆ Vue-Router中常见的导航方式： this.$router.push(“hash地址”); this.$router.push("/login"); this.$router.push({ name:‘user’ , params: {id:123} }); this.$r...
前端进阶Vue框架-----编程式导航
m0_61656944的博客
02-28 458
前端进阶Vue框架-----声明式导航
m0_61656944的博客
02-26 406
vue-router二级导航切换路由及高亮显示的实现方法
10-16
我们可以使用`v-for`循环遍历数据源，创建`<router-link>`组件来实现导航。同时，我们可以通过绑定`class`属性来控制高亮显示： ```html <!-- Guide.vue --> <ul class="nav nav-pills main-nav"> v-for="...
Vue-router 类似Vuex实现组件化开发的示例
08-29
本篇文章主要介绍了Vue-router 类似Vuex实现组件化开发的示例，具有一定的参考价值，有兴趣的可以了解一下
vue3新建项目，配置路由vue-router，引入element-plus
01-08
配置路由`vue-router`是单页应用（SPA）中必不可少的部分，它允许我们在应用中实现页面间的导航。在Vue3中，`vue-router`已经更新到了4.x版本，引入了一些新特性，如`createRouter`和`createWebHistory`等。首先，...
Vue-Router路由配置+尾部组件实例
05-21
Vue-Router是Vue.js应用程序中的官方路由库，它允许我们管理页面间的导航和状态，创建一个单页应用(SPA)的核心部分。在这个实例中，我们将深入理解Vue-Router的配置方法，并探讨如何抽取出公用的尾部组件。 首先，...
vue-page-stack：Vue SPA的路由和导航。 Vue单页应用导航管理器
02-06
Vue页面堆栈 English | Vue SPA导航管理器将UI像本地应用程序一样缓存在SPA中，而不是销毁它。 例 产品特点 :dragon: 在vue-router上扩展后，原始导航逻辑保持不变 :soccer_ball: 当页面通过push或forward重新呈现时，新呈现的页面将被添加到Stack中。 :trophy: 当back或go(negative number) ，不会重新呈现先前的页面，而是从堆栈中读取它们，并且这些页面保留先前的内容状态，例如表单内容，滚动条的位置 :american_football: back或back go (negative)将从堆栈中删除未使用的页面 :graduation_cap: replace将更新堆栈中的当前页面 :party_popper: 回滚到上一页时激活的挂
Vue技术栈 - vue-router（路由）插件
Qianmoer的博客
02-06 378
Vue技术栈 - vue-router（路由）插件
Vue Router 路由管理
xiangxiongfly
03-01 918
Vue Router 是 Vue.js 官方提供的路由管理插件，它可以让 Vue.js 应用程序实现客户端路由功能。 客户端路由是指在 Web 应用程序中，通过 JavaScript 代码来控制页面的跳转和切换，而不是通过后端服务器来控制。Vue Router 允许您将应用程序分解为多个视图，并通过 URL 来管理和导航这些视图。
Vue页面缓存机制——栈内单例模式的简单实现
qq_46205625的博客
09-06 123
原理的话，就是创建了一个页面的缓存栈cachePages，当route发生改变是，动态的修改cachePages：如果新route不包含在栈内就入栈，包含的话就退栈，退到当前route。
Vue再学习13——路由
子敬的技术博客
07-20 640
Vue再学习13——路由
vue-router
青蛙king的博客
08-08 1万+
一、如何引入并使用Vue Router 使用 Vue.js 通过组合组件来组成单页面应用程序时，如何引入并使用Vue Router 呢？ 第一步，将组件 (components) 映射到路由。 第二步，告诉 Vue Router 在哪里渲染它们。 二、动态路由匹配 三、嵌套路由 四、编程式的导航 五、命名路由 六、命名视图 七、重定向和别名 八、路由组件传参 九、HTML5 History 模式 ...
【Vue，每个程序员都必须掌握的8种数据结构
最新发布
2401_83974345的博客
04-02 397
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。
vue-vue路由管理
m0_53614495的博客
09-27 1063
我们使用createRouter方法来创建路由实例，此路由实例可以使用beforeEach方法来注册全局的前置导航守卫，之后当触发导航跳转时，都会被此导航守卫捕获。//将要跳转的路由对象//当前将要离开的路由对象return false//返回true表示允许此次跳转，返回false表示禁止此次跳转})当注册的beforeEach方法返回的是布尔值时，期用来决定是否允许此次导航跳转，以上代码表示，所有路由跳转都被禁止。
vue vue-router 路由配置问题, 重复路由
热门推荐
又是再见?
09-19 1万+
今天被这个问题坑了两个小时, 还是自己排错能力不够啊!! router 中写有这么两个配置, /resume/new 这个是新加的, 怪了, 咋改组件内容页面上都不变, 重启项目, 更新浏览器都没解决, 最终和同事一起 review 的时候仔细看了下这块, 一下就发现问题了, /resume/new 也会跳转到 /resume/:id 去, 修改 add.vue 页面当然不会变了; 之前也...
vue-cli3 项目从搭建优化到docker部署的方法
12-08
@vue/cli是一个官方提供的用于快速搭建Vue项目的工具，简化了配置和开发流程。安装@vue/cli可以通过npm或者yarn来进行，具体命令如下： ```bash npm install -g @vue/cli # 或 yarn global add @vue/cli ``` 安装...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值