小王的学习笔记（二十）——vue-router

vue-router

vue-router是vue的路由机制，使用路由实现不同组件的加载，vue-router就是vue的一个插件。

<div id="app">
        <div>
            <router-link to='/user'>用户模块</router-link>
        </div>
        <div>
            <router-link to='/info'>信息模块</router-link>
        </div>
        <div>
            <!-- 路由内容的显示 -->
            <router-view></router-view>

        </div>
    </div>
    <script>
    //模块
        let user={
            template:`
                <div>
                    用户
                </div>
            `
        }
        let info={
            template:`
                <div>
                    信息
                </div>
            `
        }
        // 创建路由对象
        let router = new VueRouter({
            routes:[{
                // 路径
                path:'/user',
                //user组件
                component:user
            },{
                path:'/info',
                component:info
            }]
        })
        new Vue({
            el:'#app',
            router
        })
    </script>

监听路由的切换

1. watch:{
   $route(to,from){}
   }
2. beforeRouteUpdate(to,from,next){
   //在当前路由改变，但是该组件被复用时调用
   //进行路由切换跳转
   next()
   }

动态组件

动态组件就是让多个组件使用同一个挂载点，并动态切换
缓存<keep-alive>
一部分组件状态如果没有改变,不需要重新加载,可以使用keep-alive
第一次加载的时候会创建,然后会对当前的组件进行缓存,下次切换的时候直接拿缓存,不会重新创建
<keep-alive>
<component is=‘组件名’></component>
</keep-alive>

编程式导航

this.$router.push('路径)

toCategory(){
  // this.$router.push('/category')
  在路由跳转的同时去携带参数、query携带的数据会拼接到地址栏、页面刷新之后,数据不会丢失
     this.$router.push({path:'/category',query:{name:'tom',age:12}})
  // this.$router.replace({path:'/category',query:{name:'tom',age:12}})
     },
toUser(){
  // this.$router.push('/user')
  // this.$router.replace({name:'user',params:{name:'tom'}})
  params携带数据不会进行拼接且刷新页面数据丢失
     this.$router.push({name:'user',params:{name:'tom'}})
},