VUE框架CLI组件化配置Router实现单页面多级路由省市区切换联动------VUE框架

已于 2023-12-17 17:45:55 修改
阅读量1k 收藏 18
点赞数 29
分类专栏： # VUE框架 前端 文章标签： javascript vue.js vue ecmascript 前端 前端框架 json
于 2023-12-17 15:33:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/135045412
版权
本文详细介绍了如何在Vue应用中使用vue-router实现省级（如河北、河南）和城市级（如石家庄、邯郸）的路由配置，包括基本路由和子路由的设置，以及使用`router-link`进行导航和选中状态控制。
摘要由CSDN通过智能技术生成 

// 导入vue-router对象
import VueRouter from "vue-router";
import Hebei from "../pages/hebei.vue";
import Henan from "../pages/henan.vue";
import ShiJiaZhuang from "../pages/shijiazhuang.vue";
import HanDan from "../pages/handan.vue";
// 创建路由器对象(在这个路由器对象中配置路由)
const router = new VueRouter({
    // 在这里配置所有的路由规则
    routes : [
        // 这就是一个路由
        {
            // 路由由path和component组成
            // 这个看作key
            // 只要路径检测到的是/hebei就切换到这个组件
            path : "/hebei",
            // 这个就是路由的value,路由的value是一个组件
            component : Hebei,
            // children子路由
            children : [
                // 配置子路由
                {
                    // 对于子路由来说,path不用添加/,以/开始
                    // 系统会自动添加
                    // path : "/hebei/shijiazhuang",
                    path : "shijiazhuang",
                    component : ShiJiaZhuang
                },
                {
                    path : "handan",
                    component : HanDan
                }
            ]
        },
        {
            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 ShiJiaZhuang from "../pages/shijiazhuang.vue";

import HanDan from "../pages/handan.vue";

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

const router = new VueRouter({

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

    routes : [

        // 这就是一个路由

        {

            // 路由由path和component组成

            // 这个看作key

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

            path : "/hebei",

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

            component : Hebei,

            // children子路由

            children : [

                // 配置子路由

                {

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

                    // 系统会自动添加

                    // path : "/hebei/shijiazhuang",

                    path : "shijiazhuang",

                    component : ShiJiaZhuang

                },

                {

                    path : "handan",

                    component : HanDan

                }

            ]

        },

        {

            path : "/henan",

            component : Henan

        }

    ]

});

// 导出路由器对象

export default router;

<template>
    <div>
        <MyHeader></MyHeader>
        <div>
            <h1>省份</h1>
            <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}
}
</script>

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

<template>

    <div>

        <MyHeader></MyHeader>

        <div>

            <h1>省份</h1>

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

}

</script>

<style>

    .s1{

        margin-left: 100px;

    }

    .s2{

        margin-left: 200px;

    }

    .selected{

        background-color: aqua;

    }

</style>

<template>
    <div>
        <!-- 组件分为普通组件和路由组件 -->
        <div class="s2">
            <h2>县区</h2>
            <ul>
                <li>新华区</li>
                <li>长安区</li>
                <li>裕华区</li>
            </ul>
        </div>
    </div>
</template>

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

<style>

</style>

<template>

    <div>

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

        <div class="s2">

            <h2>县区</h2>

            <ul>

                <li>新华区</li>

                <li>长安区</li>

                <li>裕华区</li>

            </ul>

        </div>

    </div>

</template>

<script>

export default {

    name : "ShiJiaZhuang"

}

</script>

<style>

</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">
            <h2>市区</h2>
            <ul>
                <li><router-link to="/hebei/shijiazhuang" active-class="selected">石家庄</router-link></li>
                <li><router-link to="/hebei/handan" active-class="selected">邯郸</router-link></li>
                <li>保定</li>
                <li>唐山</li>
            </ul>
        </div>
        <!-- 区组件 -->
        <router-view></router-view>
    </div>
</template>

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

<style>

</style>

<template>

    <div>

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

        <div class="s1">

            <h2>市区</h2>

            <ul>

                <li><router-link to="/hebei/shijiazhuang" active-class="selected">石家庄</router-link></li>

                <li><router-link to="/hebei/handan" active-class="selected">邯郸</router-link></li>

                <li>保定</li>

                <li>唐山</li>

            </ul>

        </div>

        <!-- 区组件 -->

        <router-view></router-view>

    </div>

</template>

<script>

export default {

    name : "Hebei"

}

</script>

<style>

</style>

<template>
    <div>
        <!-- 组件分为普通组件和路由组件 -->
        <div class="s1">
            <h2>市区</h2>
            <ul>
                <li>洛阳</li>
                <li>开封</li>
                <li>安阳</li>
                <li>郑州</li>
            </ul>
        </div>
        <router-view></router-view>
    </div>
</template>

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

<style>

</style>

<template>

    <div>

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

        <div class="s1">

            <h2>市区</h2>

            <ul>

                <li>洛阳</li>

                <li>开封</li>

                <li>安阳</li>

                <li>郑州</li>

            </ul>

        </div>

        <router-view></router-view>

    </div>

</template>

<script>

export default {

    name : "Henan"

}

</script>

<style>

</style>

<template>
    <div>
        <!-- 组件分为普通组件和路由组件 -->
        <div class="s2">
            <h2>县区</h2>
            <ul>
                <li>邯山区</li>
                <li>丛台区</li>
                <li>复兴区</li>
            </ul>
        </div>
    </div>
</template>

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

<style>

</style>

<template>

    <div>

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

        <div class="s2">

            <h2>县区</h2>

            <ul>

                <li>邯山区</li>

                <li>丛台区</li>

                <li>复兴区</li>

            </ul>

        </div>

    </div>

</template>

<script>

export default {

    name : "HanDan"

}

</script>

<style>

</style>

vue2.0.js的多级联动选择器实现方法
10-18
下面小编就为大家分享一篇vue2.0.js的多级联动选择器实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vol-vue框架Cascader 组件多级联动（前端部分）
quill_editor的博客
10-16 1835
vlo框架中对cascader组件进行自定义
vue实现三级联动，多级联动
热门推荐
进无止进
04-25 3万+
vue多级联动，三级联动
vue三级联动组件
最新发布
qq_40603125的博客
05-20 1269
/ this.costElementId = null 避免这种操作 不要在子组件中直接修改prop的值， 一般来说，prop是不应该被修改的，它是父组件传递给子组件的数据，子组件应该保持对prop只读，不应该修改它的值。// 如果一定要修改，可以通过$emit事件的方式，通知父组件修改prop的值，再通过prop的值的变化，来触发子组件的重新渲染。// 如果是打开的编辑页面 自带参数 需要初始化。// 如果是打开的编辑页面 自带参数 需要初始化。'三级列表执行成功'
Vue实现页面切换
前端卷王小白的博客
05-11 1441
Vue-Router,路由页面切换
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
11-26
Vue.js 框架提供了 Vue Router 和 Vuex 这样的工具来帮助我们实现这一功能。Vue Router 是 Vue.js 的官方路由库，用于管理应用的页面导航，而 Vuex 是一个专为 Vue.js 应用设计的状态管理模式，它集中存储和管理组件...
vue-router二级导航切换路由及高亮显示的实现方法
10-16
Vue Router是官方推荐的路由库，它允许我们定义动态和嵌套路由，实现导航和页面间的平滑过渡。本篇文章将深入探讨如何在Vue Router中实现二级导航的切换路由以及高亮显示。 首先，我们要创建两个主要的导航页面，...
Vue-router 类似Vuex实现组件化开发的示例
08-29
总结来说，Vue-router通过模块化的路由配置实现了组件化的开发，使得大型项目中的路由管理更为有序。同时，它与Vuex协同工作，分别解决了页面跳转和组件间的数据通信问题，共同构建出高效、可维护的Vue应用。学习并...
Vue-router 切换组件页面时进入进出动画方法
10-18
在Vue.js应用中，Vue-router是官方推荐的路由管理库，它使得页面间的导航和组件的切换变得简单而优雅。本文将深入探讨如何在Vue-router中实现组件页面切换时的进入和退出动画效果。 首先，我们需要在`App.vue`文件...
VUE框架CLI组件化配置Router实现单页面路由程序省市切换联动------VUE框架
春风若有怜花意，可否许我再少年
12-17 909
VUE框架CLI组件化配置Router实现单页面路由程序省市切换联动------VUE框架
vue.js实现单页跳转
qq_23732015的博客
10-17 2886
Getting Started教程中的案例代码将使用 ES2015 来编写。用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。下面是个基本例子：所有的例子
vue实现快速页面切换：
Chen__FY的博客
08-04 290
2.在script中返回对象的初始值。1.首先我们先绑定一个对象。
Vue3单击页内切换(个人学习记录)
qq_45686408的博客
02-03 682
此处仅作参考,在这里我选择element-plus框架。因为是示例所以丑了点啊哈哈哈哈。
vue 单页跳转方式大全
qq_43886548的博客
03-31 1497
vue 单页跳转方式大全 方法一 来实现导航的功能，当点击导航菜单的时候，会切换 home.vue 中 中的内容 <template> <router-link to="/ref">ref</router-link> <hr> <router-link to='/slot/666'>ref</router-link> <hr> <router-link to='/slot'&
VueRouter路由
大圣归来圣骑士清欢的博客
12-20 509
VueRouter路由
Vue-Router路由配置+尾部组件实例
05-21
Vue-Router是Vue.js应用程序中的官方路由库，它允许我们管理页面间的导航和状态，创建一个单页应用(SPA)的核心部分。在这个实例中，我们将深入理解Vue-Router的配置方法，并探讨如何抽取出公用的尾部组件。 首先，...
VUE框架CLI组件化配置Router路由前端项目上线------VUE框架
春风若有怜花意，可否许我再少年
12-20 1175
VUE框架CLI组件化配置Router路由前端项目上线------VUE框架
前端Vue篇之Vue 单页应用与多页应用的区别、对SPA单页面的理解，单页面优缺点分别是什么？
星辰迷上大海的博客
02-22 4078
单页应用（SPA）只加载一次页面资源，通过路由切换内容，提供流畅用户体验。多页应用（MPA）每次请求新页面都重新加载完整资源，适合内容丰富、SEO要求高的应用。 SPA适合交互复杂、用户体验要求高的应用，MPA适合内容丰富、SEO要求高的应用。
【温故而知新】vue运用之探讨下单页面应用（SPA）与多页面应用（MPA）
日常笔记/总结/系列知识梳理
12-29 1244
多页面应用是一种传统的Web应用程序开发模式，由多个独立的HTML页面组成，页面切换通过浏览器的刷新来实现。在Vue单页面应用中，所有的页面和组件都是动态加载的，用户访问不同的路由时，只会更新当前页面的内容，而不会刷新整个页面。多页面应用是一种传统的Web应用程序开发模式，它由多个独立的HTML页面组成，每个页面对应着一个不同的功能或视图。Vue单页面应用是一种采用Vue.js框架开发的Web应用程序，通过前端路由实现页面的切换和渲染，具有无刷新的页面切换方式和组件化开发的优势。
Vuecli 城市三级联动的使用
m0_63498341的博客
12-07 1560
首先说一下实现思路： 1.采用单独的js文件存储省市区数据，可以是json或者js文件。 2.使用mt-picker进行赋值，(需要提前引入mint-ui)根据省的数据的改变，动态的改变市和区的显示数据。 3.最好采用单独的组件实现，方便修改和复用。 引入mint-ui: //当前项目下命令行输入 npm i mint-ui --save //在main.js文件中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vu
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值