vue中页面跳转的几种方法总结
一、router-link标签跳转在html标签内使用router-link跳转,相应于超链接标签,使用方式如下:<router-link to="/">xxx</router-link>但是a标签和router-link还有一点区别的:a标签W3C中的解释:a标签定义超链接,用于从一个页面链接到另一个页面个人理解:通过a标签进行跳转,页面会被重新渲染,即相当...
·
一、router-link标签跳转
在html标签内使用router-link跳转,相应于超链接标签,使用方式如下:
<router-link to="/">xxx</router-link>
但是a标签和router-link还有一点区别的:
a标签
W3C中的解释:a标签定义超链接,用于从一个页面链接到另一个页面
个人理解:通过a标签进行跳转,页面会被重新渲染,即相当于重新打开一个新的网页,会有视觉上的“闪烁”(如果是本地的项目可能看不出来)
router-link
通过router-link进行跳转不会跳转到新的页面,也不会重新渲染,它会选择路由所指的组件进行渲染,避免了重复渲染页面,只更新变化的部分,减少DOM性能消耗
二、代码内部跳转
实际项目中,很多时候都是通过在JS代码内部进行导航的跳转,使用方式如下:
(1)先编写一个按钮,在按钮上绑定goHome( )方法。
<button @click="goHome">回到首页</button>
(2)在script模块里加入goHome方法,并用this.$router.push(‘/’)导航到首页
export default {
name: 'app',
methods: {
goHome(){
this.$router.push('/dashboard');
}
}
}
三、其他常用方法
// 后退一步记录,等同于 history.back()
this.$router.go(-1)
// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1)
更多推荐
已为社区贡献1条内容
所有评论(0)