vue的导航链接组件怎么使用

      Home
      

如果此时我们想要在这个li标签中添加a标签,如下所示，可以不为a标签添加href属性即可哦

3、active-class

类型: string

默认值: "router-link-active"

设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

about

默认值通过路由的构造选项 linkActiveClass 来全局配置,如下示例：

export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  routes: [
    {
      path:'/about',
      component:about
    }
]
})

4、exact-active-class

类型: string

默认值: "router-link-exact-active"

配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

5、exact

类型: boolean

默认值: false

"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子，如果当前的路径是 /a 开头的，那么 也会被设置 CSS 类名。

按照这个规则，每个路由都会激活！想要链接使用 "exact 匹配模式"，则使用 exact 属性：

        
全局匹配
        
严格匹配

简单点说，第一个的话，如果地址是/aa,或/aa/bb，……都会匹配成功，

但加上exact，只有当地址是/时被匹配，其他都不会匹配成功

6、event

类型: string | Array

默认值: 'click'

声明可以用来触发导航的事件。可以是一个字符串。

document

如果我们不加event，那么默认情况下是当我们点击document的时候，跳转到相应的页面，但当我们加上event的时候，就可以改变触发导航的事件，比如鼠标移入事件

7、replace

类型: boolean

默认值: false

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

8、append

类型: boolean

默认值: false

设置 append 属性后，则在当前 (相对) 路径前添加基路径

到此，相信大家对“vue的导航链接组件怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！