【router-link详细介绍】

router-link详细介绍

  • 1. router-link
    • 1.1. to
    • 1.2. replace
    • 1.3. append
    • 1.4. tag
    • 1.5. active-class
    • 1.6. exact
    • 1.7. event
    • 1.8. exact-active-class
    • 1.9. aria-current-value

1. router-link

router-link 是一个用于在 Vue 应用中创建导航链接的组件,由 Vue Router 提供,这个组件用于在不刷新页面的情况下导航到不同的 URL,并且支持 HTML History API,使用 router-link 组件能够生成一个标签,其默认行为与普通的链接相同,但它能够更加智能地处理应用内的导航。

以下是 router-link 的一些主要属性(props)和它们的用途:

1.1. to

to此属性必须设置,它决定了导航的目标路由,其值可以是一个字符串或者一个对象,当使用对象时,可以设置更多选项如pathqueryparams

  • 字符串格式: About
  • 对象格式: About

1.2. replace

replace设置为 true 后,当点击链接时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。

  • 示例:
<router-link :to="{ path: '/home'}" replace></router-link>

如果配置了replace,则在点击该链接,将会导致history记录被清空,不能再执行回退。

vue中导航中的后退-前进-编程式导航

this.$router.go(-1) :代表着后退
this.$router.go(1):代表着前进
切换到path为/home的路由
this.$router.push({    
     path:'/home'
});
//或者使用path,推荐path
this.$router.push({    
     path:'/home'
});

示例一:编程式前进后退按键
1)在页面上加入前进和后退按钮

<p>
    <button @click="previous">前进</button>
    <button @click="next">后退</button>
</p>

2)添加事件处理程序

methods: {
    //前进
    previous: function() {
        this.$router.go(1);
    },
    //后退
    next: function() {
        this.$router.go(-1);
    }
}
vue的 $
除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法,它们都有前缀 $,以便与用户定义的属性区分开

示例二:切换到指定路由:
添加一个“回家”按钮

<button @click="gotohome">回家</button>
gotohome: function() {
    console.log("go to home");
    this.$router.push({
        path: '/home'
    });
}

示例三,设置默认显示的组件:
这个很简单,只要将需要默认显示的组件对应的路由的path设置为"/"即可

//定义路由表
var routes = [
    //默认显示home
    {path:'/', component:Home}, 
    {path:'/home', component:Home},
    {path:'/about', component:About}
];

示例四:
如果配置了replace,则在点击该链接,将会导致history记录被清空,不能再执行回退。
例如: 将

<router-link to="/home">Home</router-link>

加入replace属性,修改为:

<router-link to="/home" replace>Home</router-link>

通过测试可以看到,点击home后,history记录被清空,所以一般不用。

1.3. append

append设置为 true 时,在当前(相对)路径前添加基路径,如果你当前的路径是 /a 将导航到 /a/b

1.4. tag

默认渲染为标签,有时候想要 渲染成某种标签,例如

  • , 于是我们使用 tag prop类指定何种标签,同样它还是会监听点击,触发导航,(如果不指定tag,默认渲染为a标签)

    <router-link to="/foo" tag="li">foo</router-link>
    


  • foo
  • 1.5. active-class

    active-class全局配置 router-link-active 的默认值,可以通过这个 prop 设置当链接激活时应用于渲染标签的 CSS 类名。

    1.6. exact

    exact如果设置为 true,则只有在匹配的路径完全等于链接的路径时,才应用 active-class 类。

    1.7. event

    event指定触发路由导航的事件名,默认为 click

    1.8. exact-active-class

    exact-active-class全局配置 router-link-exact-active 的默认值,可以通过这个 prop 设置,当链接的完整路径完全匹配当前路径时应用的 CSS 类名。

    1.9. aria-current-value

    aria-current-value当链接处于活动状态时,aria-current 的值,默认是 page

    上述属性使得 router-link 不仅仅是一个链接,还能够根据当前路由的状态调整样式,比如当链接指向当前路由时,可以自动设置一个激活状态的样式类。此外,router-link 还会进行各种内部优化,以确保在相同路由下不重新渲染和最小化 DOM 操作,提高性能。

    router-link 组件还支持 Vue Router 的所有导航选项,比如hashquery等,让你能以声明式的方式指定复杂的导航目标,它是构建 Vue.js 单页面应用(SPA)中的重要组件之一。

    你可能感兴趣的:(javascript,vue.js,前端,javascript,vue.js,前端,java)