VUE框架CLI组件化配置Router通过字符串形式query传参实现动态信息显示------VUE框架

已于 2023-12-17 17:46:21 修改
阅读量956 收藏 15
点赞数 19
分类专栏： # VUE框架 前端 文章标签： 前端 javascript vue.js 前端框架 vue ecmascript json
于 2023-12-17 16:14:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/135046078
版权 

<template>
    <div>
        <!-- 组件分为普通组件和路由组件 -->
        <div class="s1">
            <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>保定</li>
                <li>唐山</li>
            </ul>
        </div>
        <!-- 区组件 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name : "Hebei",
    data(){
        return {
            sjz : ["新华区","裕华区","长安区"],
            hd : ["邯山区","丛台区","复兴区"]
        }
    }
}
</script>

<style>

</style>

<template>

    <div>

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

        <div class="s1">

            <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>保定</li>

                <li>唐山</li>

            </ul>

        </div>

        <!-- 区组件 -->

        <router-view></router-view>

    </div>

</template>

<script>

export default {

    name : "Hebei",

    data(){

        return {

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

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

        }

    }

}

</script>

<style>

</style>

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

<script>
export default {
    name : "City",
    mounted(){
        // 所有的路由组件都有一个$route,通过这个属性可以获取到路由组件关联的路由对象
        console.log(this.$route);
        // 路由对象中有一个query属性,通过这个query属性可以接收到query方式传过来的数据
        console.log(this.$route.query);
    }
}
</script>

<style>

</style>

<template>

    <div>

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

        <div class="s2">

            <h2>县区</h2>

            <ul>

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

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

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

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

            </ul>

        </div>

    </div>

</template>

<script>

export default {

    name : "City",

    mounted(){

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

        console.log(this.$route);

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

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

    }

}

</script>

<style>

</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",
                    path : "city",
                    component : City
                }
            ]
        },
        {
            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",

                    path : "city",

                    component : City

                }

            ]

        },

        {

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

旧约Alatus
关注
  • 19
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Route组件
weixin_42260975的博客
03-20 564
react-router之Route组件 本文内容整理参考借鉴以下文章： https://www.jianshu.com/p/6583b7258e78 https://reacttraining.com/react-router/web/api/BrowserRouter 在此以表感谢！ Route 路由组件(Route)可能是React路由器中最重要的组件，可以帮助您更好地理解和学习使用。它最...
Vue-router 类似Vuex实现组件化开发的示例
08-29
Vue-router则通过路由参数或查询字符串实现数据传递。 总结来说，Vue-router通过模块化的路由配置实现了组件化的开发，使得大型项目中的路由管理更为有序。同时，它与Vuex协同工作，分别解决了页面跳转和组件间的...
解决vue的router组件component在import时不能使用变量问题
weixin_41656074的博客
03-10 4373
webpack 编译es6 动态引入 import() 时不能传入变量，例如dir ='path/to/my/file.js' ； import(dir) , 而要传入字符串 import(‘path/to/my/file.js')，这是因为webpack的现在的实现方式不能实现完全动态。 但一定要用变量的时候，可以通过字符串模板来提供部分信息给webpack；例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块，但运行时确定myFile的值才会加...
Vue 路由传参和获取参数的方法
最新发布
zzx262625的博客
10-25 1763
在使用 Vue 进行开发时，路由传参是非常常见且重要的功能。通过路由传参，我们可以在不同的页面之间传递数据，以实现更灵活的交互和功能。Vue 提供了多种方法来实现路由传参和获取参数的操作。
vue-router当中内置component标签(组件)的使用
动感超人的博客
10-28 2712
可以传入字符串,也可以传入组件。
vue-router--路由传参--query传参
qq_43470725的博客
06-19 1207
vue-router
vue-cli基本框架elementUi+axios+mock.zip_axios_vue_vue elementui_vue-
09-21
Vue CLI 提供的这些基础配置和集成的工具，使得 Vue 项目开发变得更加高效和标准化。Element UI 的引入使得界面设计变得简单，Axios 作为 HTTP 客户端处理数据请求，Mock.js 则在没有真实后端支持时提供了模拟数据的...
easyplayer--基于Vue框架、组件化开发的第三方网易云音乐播放器
09-02
本文将深入探讨"easyplayer"，这是一个利用Vue.js框架和Element-UI库进行组件化开发的第三方网易云音乐播放器。该播放器具备丰富的功能，包括网易云音乐账号登录、MV播放以及歌词显示等，为用户提供了便捷且个性化的...
详解vue-router传参的两种方式
01-19
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。...vue-router传参两种方式：params和query params、query是什么？  params：/router1/:id ，/router1/1
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
11-26
Vue.js 框架提供了 Vue Router 和 Vuex 这样的工具来帮助我们实现这一功能。Vue Router 是 Vue.js 的官方路由库，用于管理应用的页面导航，而 Vuex 是一个专为 Vue.js 应用设计的状态管理模式，它集中存储和管理组件...
vue路由传参的6种方式
一步一个脚印，踏实努力，向着目标前进
08-09 5145
命名路由适用于需要在不同组件之间传递参数的情况，Props传递参数适用于需要在组件之间传递参数的情况，而Vuex状态管理适用于需要在整个应用程序中共享参数的情况。需要考虑参数的类型、数量、动态性、共享性等因素，以及对URL长度和可读性的要求。根据具体的应用场景和需求，可以选择适合的方式来传递参数。在路由定义中给每个路由设置一个唯一的名称，然后通过名称来传递参数。在路由定义中使用props属性来传递参数。在路由定义中使用动态路径参数来传递参数。在路由定义中使用元信息来传递参数。
Vue - vue-router动态路由
qq_33962481的博客
08-17 671
文章目录一、动态路由1.1 设置动态路由1.2 动态给路由绑定userid二、在User组件里面显示id信息2.1 `this.$route`2.2 `this.$route.params` 一、动态路由 在某些情况下, 一个页面的path路径可能是不确定的, 比如我们进入用户界面时, 除了前面的/user之外, 后面还跟上用户的ID : /user/aaa 1.1 设置动态路由 import VueRouter from 'vue-router' import Vue from 'vue' imp
Vue3功能实战 —— 动态路由、路由签权、动态组件 使用示例
技术前端，忠于热爱 @0.活在风浪里
07-09 3475
Vue3 动态路由、动态组件使用示例
路径的Vue路由配置“组件”：/不能是字符串ID
wwf1225的博客
01-17 4381
路径的Vue路由配置“组件”：/不能是字符串ID 我正在使用组件和路线的概念来开发项目。组件在哪里工作，但是当我尝试定义路线时出现错误 Uncaught Error :: route config component for path: /signin cannot be a string id. Use an actual component instead. 要么 ...
vue的router组件component在import时不能使用变量
热门推荐
牧竹子
08-29 2万+
webpack 编译es6 动态引入 import() 时不能传入变量，例如dir =’path/to/my/file.js’ ； import(dir) , 而要传入字符串 import(‘path/to/my/file.js’)，这是因为webpack的现在的实现方式不能实现完全动态。 但一定要用变量的时候，可以通过字符串模板来提供部分信息给webpack；例如import(./path...
根据字符串设置component（vue、js）
weixin_42284501的博客
08-03 1116
自定义component根据输入的不同字符串，给component绑定的变量赋值不同的组件变量名 原做法： import gpf from ‘./gpf.vue’ const str = ‘gpf’; // 模仿传入 this.component = eval( str) 原做法问题： eval（‘gpf’)找不到gpf这个变量，显示 not defined 解决方法： const str = ‘gpf’; const gpf=() => import(’./gpf.vue’), const
Vue.component 的第一个参数必须是静态的字符串。
junjiahuang的博客
09-04 2137
Vue.component 的第一个参数必须是静态的字符串。 vue官网是支持动态名称的，uniapp不支持！
vue中的vue-router query方式和params方式
hjh15827475896的博客
10-16 6433
我们在vue中项目中, 使用 vue-router 是比较常见的 vue 的路由跳转有两种方式 一种是使用组件 router-link 另一种就是编程式路由导航 我们可以把vue 的组件分为两种, 一种是一般组件, 一种就是路由组件 一般组件 使用的时候, 我们都是手写 它的标签来使用的 比如我们会引入component 使用时会写明<VueComponetXXXX></VueComponentXXX> 路由组件 我们一般会在 router.js中定义路由组件, 为它配置pat
Vue Router中query取值问题注意事项
cxs91106的博客
06-18 1489
今天遇到一个关于Vue Router query 参数中，取值后做字符串截取遇到的坑，query的值是20200102这样的值，取到后理所当然的想对日期做格式化（利用字符串的substr方法），然后确理所当然的报错了（找不到substr方法），仔细一想，才明白，Vue Router中的参数是带类型的，其实20200102这个值被当成整型了，所以报错，这点是和URL中截取字符串是有区别的，从浏览器地址从获取的参数统一都是字符串类型的。 总而言之，Vue Router的参数是带数据类型的（整型，布尔等等），浏

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值