首页 > 其他分享 >VUE框架CLI组件化配置Router切换路由和保持路由状态和路由组件的销毁------VUE框架

VUE框架CLI组件化配置Router切换路由和保持路由状态和路由组件的销毁------VUE框架

时间:2024-01-23 16:00:57浏览次数:30  
标签:VUE name -- 石家庄 组件 router 路由

<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>
        <!-- 路由视图,起到一个占位的作用 -->
        <!-- <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>
        <!-- 组件分为普通组件和路由组件 -->
        <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><input type="checkbox"/>
                    <!-- 当我们在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><input type="checkbox"/>
                    <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><input type="checkbox"/>保定</li>
                <li><input type="checkbox"/>唐山</li>
            </ul>
        </div>
        <!-- 区组件 -->
        <router-view></router-view>
    </div>
</template>
 
<script>
export default {
    name : "Hebei",
    data(){
        return {
            sjz : ["新华区","裕华区","长安区"],
            hd : ["邯山区","丛台区","复兴区"]
        }
    },
    beforeDestroy(){
        console.log("啊,组件去世了!")
    },
    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">
            <!-- 栈数据结构 -->
            <!-- 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>

标签:VUE,name,--,石家庄,组件,router,路由
From: https://blog.51cto.com/u_16322355/9380745

相关文章

  • vue-helper 点击跳转插件 在 methods里面互相调用函数,会产生两个函数definitions ,然后
    vue-helper点击跳转插件在methods里面互相调用函数,会产生两个函数definitions,然后就回弹出框让你选择原因:换了台电脑,又从新配置下vscode"editor.gotoLocation.multipleTypeDefinitions":"goto","editor.gotoLocation.multipleReferences":"goto","editor.got......
  • Mygin实现动态路由
    本篇是Mygin的第四篇目的使用Trie树实现动态路由解析。参数绑定前缀树本篇比前几篇要复杂一点,原来的路由是用map实现,索引非常高效,但是有一个弊端,键值对的存储的方式,只能用来索引静态路由。遇到类似hello/:name这动态路由就无能为力了,实现动态路由最常用的数据结构,被称为......
  • rocketmq--如何做路由发现、注册、剔除的
    RocketMQ的NameServer是一个轻量级的服务,负责维护关于Broker的路由信息和提供路由查询服务。以下是NameServer在Broker管理、路由发现、路由注册和路由剔除方面的工作机制:Broker管理:Broker在启动时会向所有的NameServer发送注册请求,包含自己的地址、存储的队列......
  • Vue项目迁移小程序,实操干货分享
     今天就给大家分享“Vue项目转小程序”的实操干货。首先明确需求:开发者是想将已有的Vue项目转为小程序,在集成了 FinClip SDK的App中运行小程序,那这里我们就需要关注以下两个注意事项:Web项目是适合在手机等移动设备中运行的,屏幕已经兼容;H5项目的代码是前后端分离......
  • 浅析vue cli的webpack配置属性 devServer 详解 和 devServer.proxy 工作原理解析
    浅析vuecli的webpack配置属性devServer详解和devServer.proxy工作原理解析:https://blog.csdn.net/qq_47443027/article/details/125985081?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-125985081-blog-127746519.235^v......
  • 首页的热门推荐组件
    1.准备组件(只有首页用到)2.导入并使用组件热门推荐布局为独立的组件`HotPanel`,属于首页的业务组件,存放到首页的`components`目录中。静态:<scriptsetuplang="ts">//</script><template><!--推荐专区--><viewclass="panelhot"><viewclass=&quo......
  • 前台分类-组件封装
      准备工作准备组件,只有首页使用导入并使用组件(手动)设置首页底色为 #F7F7F7静态结构前台类目布局为独立的组件 CategoryPanel属于首页的业务组件,存放到首页的 components 目录中。<scriptsetuplang="ts">//</script><template><viewclass="category">......
  • springboot+vue--注册
    ***在UserController中声明一个(/register),接口中包括两个功能://用户名是否已被占用//注册**​publicResultregister(Stringusername,Stringpassword){}***在UserService(接口)中,实现两个方法:**​publicUserfindByUsername(Stringusername){}//根据用户......
  • request to https://registry.npm.taobao.org/vue-loader failed!
    npminstall报错:requestto https://registry.npm.taobao.org/vue-loader failed,reason:getaddrinfoENOTFOUNDregistry.npm.taobao.org解决:https://jingyan.baidu.com/article/acf728fd99b16ff8e510a301.html查看镜像源:npmgetregistryhttps://registry.npmjs.org/国......
  • VUE框架CLI组件化配置Router路由局部守卫path和componet和router完整项目实现------VU
    <template><div><!--组件分为普通组件和路由组件--><divclass="s2"><h2>县区</h2><ul><!--query形式接收--><!--<li>{{$route.......