路由的使用，vue-router

路由主要的作用实现单页面跳转，不触发跳转界面

每一个路由身上都有一个route，但是所有的路由只有一个router

路由的创建

//使用路由先引用路由
impor VueRouter from "vue-router"
Vue.use(VueRouter)

在src文件下创建router文件夹，配置路由

impor VueRouter from "vue-router"
New VueRouter({
    //这样就创建了一个跳转About组件名字的路由
    routes:[{
        path:'/',
        component:"About"
    }]
})

路由的使用

//keep-active标签代表组件切换不会销毁，有name属性是组件的名字，添加了就会保护该组件
<keep-active name:"About"> //添加name不会销毁
    //使用时需要用到router-link标签，配置to属性，这个标签会转换成a标签，to里面可以配置path或者name，query或者params传递参数到router身上的query和params属性上
    <router-view>
        //路由加载需要配置router-view标签
        About路由加载区
    </router-view>
</keep-active>
<router-link :to="{
    //跳转path或者路由的名字
    path||name,
    //传值类型
    query||parmas
}">
</router-link>

push和replace方法

使用这两个方法不需要使用router-link标签实现跳转,不同的是push方法会留下痕迹，而replace则是替换掉当前的记录

methods:{
    demo(){
        this.$router.push({
            //同to配置
            //跳转path或者路由的名字
            path||name,
            //传值类型
            query||parmas
        })
    
    }



}

back，forward，go

这三个方法用于跳转路由，back后退，forward前进，go传参数表示前进几步

methods(){
    //绑定事件，点击跳转
    click(){
        this.$router.back()
        this.$router.go(2)
        this.$router.forward()
    }

}

两个和路由相关的生命周期函数activated和deactivated

必须配合keep-actiive使用，activated代表激活，deactivated代表失活

activated(){
    //激活要处理的
}
deactivated(){
    //失活需要处理的函数
}