P13.6-VueRouter通过代码跳转路由

1.概述

在<router-link>跳转路由方式上，本篇介绍另一种方式跳转路由，就是通过代码跳转到指定的路由。

2.通过点击事件跳转到指定路由

• 首先我们将首页和关于两个组件页面跳转方式设计成点击按钮跳转到指定页面。
• 代码逻辑中通过click接收用户点击事件，触发对应的方法。
• 在方法中通过$router对象调用push方法跳转到指定的路由。

2.1.修改App.vue实现代码跳转路由

<template><div id="app"><!-- 1.将首页和关于设置成两个按钮，并绑定homeClick和aboutClick方法 --><button @click="homeClick">首页</button><button @click="aboutClick">关于</button><!-- 显示指定路由对应的组件内容 --><router-view></router-view></div>
</template><script>
export default {name: 'App',methods: {homeClick() {// 2.通过$router对象调用push方法跳转到指定的路由this.$router.push('/home');console.log('homeClick');},aboutClick() {this.$router.push('/about');console.log('aboutClick');}}
}
</script><style>.active{color: #f00}
</style>

2.2.预览效果

1.启动项目

#进入项目根路径cd .\01-learnvuerouter\#启动项目
npm run dev

2.预览效果