在上节课我们配置了两个页面,一个首页/一个列表页/list,现在我们要查看这两个页面只能通过在浏览器地址栏里输入url,这节课我们就来学习一下如何实现页面的跳转
1)使用router-link
router-link是vue-router自带的一个组件,表示一个链接元素,和原生的a标签非常像,比如我们在首页里增加一个router-link,点击后跳转到列表页
<template>
<div>这里是首页</div>
<router-link to="/list">点击跳转到列表页</router-link>
</template>
<script>
export default {}
</script>
<style></style>
在router-link里有一个to属性,表示点击后要跳转的页面,跟a标签的href属性一样,
页面效果是这样的
其实它本来也被渲染成了一个a标签
然后我们在列表页也添加一个链接,跳转到首页
<template>
<div>这里是列表页</div>
<router-link to="/">点击跳转到首页</router-link>
</template>
<script>
export default {}
</script>
<style></style>
这是最简单的router-link的使用,以后我们会介绍它的其他功能
2)使用js控制
用router-link还是不够灵活,比如我们点击一个按钮时,先要做一些别的事,比如向后台上传数据,再跳转页面,这时候我们用js去控制跳转页面就灵活多了
我们增加一个按钮,给它绑定一个点击事件
<template>
<div>这里是首页</div>
<router-link to="/list">点击跳转到列表页</router-link>
<button @click="onBtnClick">按钮点击后跳转列表页</button>
</template>
<script>
export default {
methods: {
onBtnClick() {
// 在这里可以处理一下其他逻辑
this.$router.push('/list')
},
},
}
</script>
<style></style>
在点击回到事件里,我们有this.$router,获取到了路由对象,调用了它的push方法,参数就是我们要跳转的页面的路由,点击后页面就跳转了
这节课的逻辑很简单,主要是大家要把这两种跳转方式的写法记住,动手写一写,记得更快。