VUE框架CLI组件化配置Router切换路由和保持路由状态的两个路由组件的钩子函数------VUE框架

旧约Alatus

已于 2023-12-25 14:14:18 修改

阅读量940

点赞数 30

分类专栏： # VUE框架前端文章标签：前端 javascript 前端框架 ecmascript js vue.js vue

于 2023-12-19 16:20:00 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/135087768

版权

前端同时被 2 个专栏收录

330 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<template>
    <div>
        
        <div class="s1">
            
            <h2>市区</h2>
            <ul>
                
                
                
                
                
                
                
                
                
                
                <li><input type="checkbox"/>
                    
                    
                    
                    <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><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 : ["邯山区","丛台区","复兴区"]
        }
    },
    mounted(){
        // 挂载完毕之后
        // 创建一个定时器
        // this.timer = setInterval(() => {
        //     console.log("我是一个定时器");
        // },1000);
    },
    // 只有路由组件才有这两个钩子函数
    activated(){
        console.log("我激活了");
        // 创建一个定时器
        this.timer = setInterval(() => {
            console.log("我是一个定时器");
        },1000);
    },
    deactivated(){
        console.log("我被切换走了");
        // 删除定时器
        clearInterval(this.timer);
    },
    beforeDestroy(){
        console.log("啊,组件去世了!");
        // 删除定时器
        // clearInterval(this.timer);
    },
    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">



<h2>市区</h2>

<ul>





















<li><input type="checkbox"/>







<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><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 : ["邯山区","丛台区","复兴区"]

}

},

mounted(){

// 挂载完毕之后

// 创建一个定时器

// this.timer = setInterval(() => {

// console.log("我是一个定时器");

// },1000);

},

// 只有路由组件才有这两个钩子函数

activated(){

console.log("我激活了");

// 创建一个定时器

this.timer = setInterval(() => {

console.log("我是一个定时器");

},1000);

},

deactivated(){

console.log("我被切换走了");

// 删除定时器

clearInterval(this.timer);

},

beforeDestroy(){

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

// 删除定时器

// clearInterval(this.timer);

},

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>
        <MyHeader></MyHeader>
        <div>
            
            
            
            
            <h1>省份</h1>
            
            <button @click="forward()">前进</button>
            <button @click="back()">后退</button>
            <button @click="forwardTwo()">前进2步</button>
            <button @click="backTwo()">后退2步</button>
            <ul>
                
                
                
                
                
                
                <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 :include="['Hebei','Henan']">
            
            
            
            
            <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>









<h1>省份</h1>



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

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

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

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

<ul>













<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 :include="['Hebei','Henan']">









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