vue-router中v-link指令特性

2506 查看

链接活跃时的class

**判断是否活跃使用的是包含性匹配;**

比如:一个带有指令v-link='/a'的元素,只要当前路径以/a开头,此元素就会被判断为活跃;

通过exact内联选项来设置路径完全一致时才匹配:
<a v-link="{ path: '/a', exact: true }"></a>

改变活跃时class:

方法一:
        通过创建路由实例时传入linkActiveClass来指定;----全局
        
    方法二:
        通过activeClass内联选项来单独指定:
        <a v-link="{path:'/a',activeClass:'own-defined-class'}"
        

v-link内联选项:

v-link 会自动设置 <a> 的 href 属性。

replace:
    带有指令v-link的元素默认是触发router.go()事件,保留历史记录;
    //设置replace,点击时触发router.replace(),跳转不会留下历史记录:------不会留下当前页面的历史记录,会留下目标页面的历史记录;
    <a v-link="{path:'/a',replace:true}"
            
append:
    //path必须是相对路径;-----绝对路径不行;
    带有append:true选项的相对路径跳转时会将自己的路径添加到当前页面URL路径之后;
    
    <a v-link='{path:"/a"}'></a>
    <a v-link='{path:"b",append:true}'></a>
    //由a跳转至b,生成的URL为/a/b
    //如果path:'/b'的话,生成的URL为/b
    

动态组件懒加载: