美文网首页
Vue方向:Vue路由跳转时组件的属性

Vue方向:Vue路由跳转时组件的属性

作者: 我王某不需要昵称 | 来源:发表于2021-12-29 13:30 被阅读0次

    1、通过标签进行路由跳转

    1.1  标签跳转路由的方式

            Vue Router提供了两个内置的组件帮助我们进行路由的跳转

            使用方式:

    代码

    代码

     结果说明:

            1.  router-link 会自动的被渲染为a标签

            2.  router-view为组件显示的位置,会被显示的组件给替换掉

            3.  li标签嵌套a标签

    1.2  router-link组件的其他属性

            很显然,我们目前已知的属性有 to 属性,用来跳转路由,那么router-link还有哪些其他的属性呢?

    1.2.1  tag属性

            tag属性用于指定router-link组件在渲染时被渲染成什么标签,修改代码如下:

    代码

     修改结果说明:

            1、在开发中router-link就不用在被li标签所嵌套,减少一层标签的使用

            2、因为router-link在渲染时会被渲染为li标签,因为符合标签嵌套规则,ul中嵌套li

            3、前端路由的跳转可以是任何标签

            4、router-link可以通过tag属性指定渲染为任何标签

    1.2.2  replace属性

            replace属性是直接替换当前history记录,因此就不能利用浏览器的前进后退键来切换路由显示,在默认的情况下,每次切换路由都是在像history历史记录中添加路由,这样就可以通过浏览器前进后退切换页面显示,如果不希望用户使用浏览器前进后退,就可以使用replace属性。

    代码

            虽然多次切换了路由,但是每一次切换路由都是通过replace替换history历史记录,因此不会生产新的历史记录,也就不会使用前进后退键。

    1.2.3  active-class属性

            当<router-link>对应的路由匹配成功以后,会自动给当前路由添加一个 router-link-active 的类名

            当前页面路由匹配成功,页面显示关于我们,同时页面的路由会自动拥有router-link-active的类名,active指的活跃,router-link-active理解为激活的路由。

            因此,可以利用这个路由来做切换路由的高亮显示,通过router-link-active类自定义当前路由的样式

    代码

    样式的修改

            每次切换路由,当前匹配的路由都会具有 router-link-active,具有这个类名的,也就有了其他路由不同的样式。

            但也可以通过<router-link>组件中 active-class 属性来修改

    代码

            除了在router-link组件中通过active-class属性修改外,还可以在路由的配置对象中修改,如果整个项目中所有活跃路由的类名需要修改的话,可以在路由配置中修改

    router文件下的index.js

    2、编程式导航

            通过<router-link>组件渲染的html标签进行跳转,还可以在方法中进行路由的跳转,在方法中进行的路由跳转称为 编程式导航。

    代码

            结果依然是可以正常执行的。

    3、  替换history记录

            push方法可以跳转路由,但是正如之前说的,push在每一次跳转路由的时候,都会在history新增历史记录。想要替换history记录,可以使用replace方法。

    相关文章

      网友评论

          本文标题:Vue方向:Vue路由跳转时组件的属性

          本文链接:https://www.haomeiwen.com/subject/qlpvqrtx.html