省份
            
            前进
            后退
            前进2步
            后退2步
            

                
                
                
                
                
                
                
河北省
                
河南省
            
        
        
        
        
        
            
            
            
            
            
        
    

 

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

 

    .s1{
        margin-left: 100px;
    }
    .s2{
        margin-left: 100px;
    }
    .selected{
        background-color: aqua;
    }

    

        
        

            
            
市区
            

                
                
                
                <!-- 
石家庄
                
邯郸
 -->
                <!-- 

                    // 对象形式传参实现
                    石家庄
                    
                
 -->
                
                
                
                <!-- 

                    
                    石家庄
                    
                
 -->
                
                


                    
                    
                    
                    
                    石家庄
                    
                    石家庄
                
                <!-- 

                    邯郸
                    
                
 -->
                
                
                
                <!-- 

                    邯郸
                    
                
 -->
                
                


                    邯郸
                    
                    邯郸
                
                

保定
                

唐山
            
        
        
        
    

 

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]
                }
            },() => {},() => {});
        }
    }
}

 

 

    

        
        

            
            
            
            
             
            
            
            
市区
            

                
洛阳
                
开封
                
安阳
                
郑州
            
            
            
            
            
            
            
            
            
            
            
        
        
    

 

export default {
    name : "Henan",
    beforeDestroy(){
        console.log("啊,组件去世了!")
    },
}