第三十三节:Vue路由:Vue-router路由跳转方式

前沿:

上一小节,在讲路由安装与基本使用的时候,已经提及和使用过的,通过内置的组件进行路由的跳转

出了这种跳转路由的方式外还有其他的跳转方式吗?

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

1.1 标签跳转路由的方式

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

使用方式:

 <!-- 导航-点击跳转 --> 
<!-- to属性类似与a标签的href --> 
<router-link to="/home">首页</router-view> 
<router-link to="/list">列表</router-view>  
<router-link to="/about">关于作者</router-view>  

<!-- 展示路由组件 --> 
<router-view></router-view>

示例代码:

<div class="content">
    <router-view></router-view>
</div>
<ul>
    <li>
        <router-link to="/home">首页</router-link>
    </li>
    <li>
        <router-link to="/list">列表页</router-link>
    </li>
    <li>
        <router-link to="/about">关于作者</router-link>
    </li>
</ul>

查看router-link以及router-view渲染结果

标签跳转路由_图1.png

结果说明:

router-link会自动被渲染为a标签
router-view为组件显示的位置,会被显示的组件给替换掉
通过示例显示,li标签之嵌套了一个a标签,

思考:

因为vue示例中本身就是单页面应用, 不需要跳转其他页面, 那么是不是可以利用其他标签来跳转路由
如果可以使用其他标签跳转路由,咱们何不用li来跳转路由呢, 这样li中也少嵌套一层标签

1.2 router-link组件的其他属性

示例中我们已经使用了一个router-link组件的to属性,用来跳转路由,

router-link还有一些其他的属性

1.2.1 tag属性

tag属性用于指定router-link组件在渲染是被渲染成什么标签

既然如此,就可以将之前的代码示例进行如下的修改

修改代码:

<div class="content">
    <router-view></router-view>
</div>
<ul>
    <router-link tag="li" to="/home">首页</router-link>
    <router-link tag="li" to="/list">列表页</router-link>
    <router-link tag="li" to="/about">关于作者</router-link>
</ul>

渲染结果:

tag属性结果_图2.png

修改结果说明:

在开发是router-link就不用在被li标签所嵌套,减少一层标签的使用
因为router-link在渲染时会被渲染为li标签,因为符合标签嵌套规则,ul中嵌套li
测试结果:示例依然能正常运行,因此前端路由的跳转可以是任何标签,
router-link可以通过tag属性指定渲染为任何标签

1.2.2 replace 属性

replace属性是直接替换当前history记录, 因此就不能利用浏览器的前进后退键来切换路由显示

在默认情况下,每次切换路由都是在像history历史记录中添加路由,

这样就可以通过浏览器前进后退切换页面显示

如果不希望用户使用浏览器前进后退,就可以使用replace属性

使用示例:

<ul>
    <router-link tag="li" to="/home"  replace>首页</router-link>
    <router-link tag="li" to="/list"  replace>列表页</router-link>
    <router-link tag="li" to="/about" replace>关于作者</router-link>
</ul>

示例显示结果

路由替换_图3.gif

通过示例就会了解到,虽然切换了多次路由,

但是每一次切换路由都是通过replace替换history历史记录,

因此不会生成新的历史记录,也就没法使用前进后退键

1.2.3 active-class 属性

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

如图:

匹配路由的类名_图4.png

示例图中显示,当前首页路由匹配成功,页面显示首页

同时首页的路由会自动拥有router-link-active的类名

active是活跃的意思,router-link-active可以理解为当前活跃的路由

因此我们就可以利用这个路由来让我们切换路由的tabBar能高亮显示

之前的示例在切换路由时,底部的tabBar都没有任何变化.现在可以尝试修改一下

通过router-link-active类名定义当前路由的样式

.router-link-active{
  color: red;
  font-weight: bolder;
}

显示结果:

路由切换_图5.gif

示例中每次切换路由,当前匹配的路由都会具有router-link-active,

具有这个类名的,也就拥有了与其他路由不同的样式.

但是有的时候在定义里面的时候会觉得这个类名太长了,想修改这个类名

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

代码

HTML代码

<ul>
    <router-link 
                 tag="li" 
                 to="/home"  
                 replace 
                 active-class="router-active"
                 >
        首页
    </router-link>
    <router-link tag="li" 
                 to="/list"  
                 replace 
                 active-class="router-active"
                 >
        列表页
    </router-link>
    <router-link 
                 tag="li" 
                 to="/about" 
                 replace 
                 active-class="router-active"
                 >
        关于作者
    </router-link>
</ul>

CSS修改

.router-active{
    color: red;
    font-weight: bolder;
}

显示结果:

修改活跃类名_图6.png

除了在router-link组件中通过active-class属性一个一个修改外,还可以在路由的配置对象中修改

如果真的要在整个项目中所有活跃路由的类名都需要修改的话,可以在路由配置中修改

const router = new VueRouter({
    mode:"history",
    routes,
    linkActiveClass:"router-active"
})

但是:

通常不会修改这个类名;会直接使用默认router-link-active

2. 编程式导航

通过了通过<router-link>组件渲染的html标签进行跳转,还可以在方法中进行路由的跳转

在方法中进行的路由跳转为称为编程式导航

2.1 修改示例代码

<template>
    <div id="app">
        <div class="content">
            <router-view></router-view>
        </div>
        <ul>
            <!-- 编程式导航, 点击触发事件函数-->
            <li @click="goHome">首页</li>
            <li @click="goList">列表页</li>
            <li @click="goAbout">关于作者</li>
        </ul>

    </div>
</template>

<script>
    export default {
        name: 'App',
        methods:{
            goHome(){
                // 在事件函数中,通过组件实例对象下的$router
                // 获取路由对象,然后push 要跳转的路由
                this.$router.push("/home")
            },
            goList(){
                this.$router.push("/list")
            },
            goAbout(){
                this.$router.push("/about")
            }
        }
    }
</script>

结果依然可以正常显示

2.2 替换history记录

push方法可以跳转路由,但是正如之前所说的,push在每一次跳转路由的时候,都会在history新增历史记录

如果希望替换history记录,可以使用replace方法

<script>
    export default {
        name: 'App',
        methods:{
            goHome(){
                // 在事件函数中,通过组件实例对象下的$router
                // 获取路由对象,然后push 要跳转的路由
                this.$router.replace("/home")
            },
            goList(){
                this.$router.replace("/list")
            },
            goAbout(){
                this.$router.replace("/about")
            }
        }
    }
</script>