VueRouter编程式路由导航

不使用<router-link>标签利用$router中的api实现跳转更灵活

<template>
	<div>
		<button @click="goDetailByPush()">进入详情压栈操作</button>
		<button @click="goDetailByReplace()">进入详情replace操作</button>
	</div>
</template>
<script>
export default {
	name: 'Detail',
	methods: {
		goDetailByPush() {
			this.$router.push({
				path: '/list/detail',
				query: {
					id: '001',
					title: '标题'
				}
			});
		},
		goDetailByReplace() {
			this.$router.replace({
				path: '/list/detail',
				query: {
					id: '001',
					title: '标题'
				}
			});
		}
	}
}
</script>

注意事项

1. this.$router.push()是压栈操作可以回到之前的所有历史记录
2. this.$router.replace()是替换操作不能回到上一次的历史记录
3. this.$router.back()回退一条记录与history.back()的使用方式一致
4. this.$router.forward()前进一条记录与history.forward()的使用方式一致
5. this.$router.go()与history.go()的使用方式一致
   ① go(0)刷新当前页面
   ② go(负整数)后退n条记录
   ③ go(正整数)前进n条记录