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