解决vue单页面跳转页面刷新问题

在vue单页中, 使用a标签href跳转单页面的时候,页面会闪一下,体验很不好根据研究, 是因为a标签默认属性使页面刷新了一下方法一: 使用编程式导航所以可以给a的href属性值为javascript:;阻止跳转, 然后使用点击处理跳转goToPage() {this.$router.push('/home')}方法二: 使用声明式导航直接使用vue自带的导航组件就可...

jared.wang

4099人浏览 · 2019-07-12 11:09:42

jared.wang · 2019-07-12 11:09:42 发布

在vue单页中, 使用a标签href跳转单页面的时候,页面会闪一下,体验很不好
根据研究, 是因为a标签默认属性使页面刷新了一下

方法一: 使用编程式导航

所以可以给a的href属性值为javascript:;阻止跳转, 然后使用点击处理跳转

goToPage() {
	this.$router.push('/home')
}

方法二: 使用声明式导航

直接使用vue自带的导航组件就可以实现了

<router-link to="/home">主页</router-link>

ps: 这两种方法都测试有效,请放心使用

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^