Vue-Router简单整理

Vue-router

view-link标签的属性：

1.to="":略；在这里必须写完整的路径名，包括嵌套路由

2.active-class="":当前路由激活是应用的样式

3.tag="":实际渲染的标签

4.replace:将路由操作不写入浏览器的History对象中

路由传参：

方式一：

1.在view-link标签中的写法：v-bind:to="'/main/'+route"

2.定义时：{ path:'/main/:param',component:xxx }

3.参数获取：在当前路由的组件中使用 $route.params

方式二：

1.在view-link标签的to属性中使用v-bind:

v-bind:to="{ path='/路径名', query: {

    key1:value1,

   key2:value2

    

} }"

2.参数获取，在当前路由的组件中使用：$route.query

路由手动传参

//方式一

this.$router.push[replace]('/路径名'+params)

//方式二

this.$router.push[replace]({

    path:'路径名',

    query:{

        key1:value1,

        key2:value2,

        // ...

    }

})

$router与$route

$router表示全局定义的VueRouter对象

$router中的方法：

1.push() 往浏览器的History对象中推入一个历史记录

2.replace() 将浏览器当前的路径替换，并不写入浏览器的History对象中

$route表示当前激活的路由

//获取动态路由参数

this.$route.params.参数名

路由懒加载

//第一步，引入，必须是以下写法

const comp = () => import('组件路径')

//第二步，注册

component: comp

导航守卫

注册路由时加上以下代码

//这个函数将会在每次路由跳转之前调用

router.beforeEach((to,from,next)=>{

    //to  要跳转到的路由

    //from  当前激活的路由

    //这里的title属性需要手动定义在每个路由的meta属性中

    //修改每次切换路由时网页的名字

    ducument.title = to.matched[0].meta.title

    //next参数是一个函数，必须调用一次

    next()

})

路由独享守卫

定义路由时在需要定义独享守卫的路由中定义一个钩子函数

{

    path:'...',

    component:xxx,

    //进入该路由之前调用该钩子函数

    beforeEnter(to,from,next){

        //xxxxx

    }

}

组件内的守卫

定义组件时在组件内定义新的钩子函数：

const component = {

    template:'xxxxxx',

    beforeRouteEnter(){

        //此处不能访问该组件的this，因为此时该组件实例还未被创建完成

    },

    beforeRouteUpdate(){

        //可以访问该组件实例的this

    },

    beforeRouteLeave(){

        //可以访问该组件实例的this

    }

}

keep-alive

1.用于缓存被keep-alive标签包裹起来的组件，即当该组件处于隐藏状态时不会被销毁

2.被keep-alive标签包裹起来的组件内可以使用额外的钩子函数：

{

    //...

    activated(){

        //组件处于激活状态时调用

    },

    deactivated(){

        //组件处于隐藏状态时调用

    }

    //...

}

keep-laive的两个重要属性

1.include：

字符串或正则表达式，匹配组件的name属性，缓存符合条件的组件，多个组件用字符串表示时用逗号隔开，且不能有多的空格符

2.exclude:

字符串或正则表达式，匹配组件的name属性，缓存除了匹配到的其他组件，多个组件用字符串表示时用逗号隔开，且不能有多的空格符