应用环境

不借助router-link标签,用按钮实现路由跳转

this.$router属性

编程式路由导航的两种跳转

1. push跳转

<ul>
	<li v-for="m in messageList" :key="m.id">
		<!-- 跳转路由并携带params参数，to的对象写法 -->
		<router-link :to="{
			name:'xiangqing',
			query:{
				id:m.id,
				title:m.title
			}
		}">
			{{m.title}}
		</router-link>
		<button @click="pushShow(m)">push查看</button>
	</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

pushShow方法

methods: {
	pushShow(m){
		this.$router.push({
			name:'xiangqing',
			query:{
				id:m.id,
				title:m.title
			}
		})
	},
},
1
2
3
4
5
6
7
8
9
10
11

页面效果

2. replace路由跳转

<ul>
	<li v-for="m in messageList" :key="m.id">
		<!-- 跳转路由并携带params参数，to的对象写法 -->
		<router-link :to="{
			name:'xiangqing',
			query:{
				id:m.id,
				title:m.title
			}
		}">
			{{m.title}}
		</router-link>
		<button @click="replaceShow(m)">replace查看</button>
	</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

replaceShow方法

methods: {
	replaceShow(m){
		this.$router.replace({
			name:'xiangqing',
			query:{
				id:m.id,
				title:m.title
			}
		})
	},
},
1
2
3
4
5
6
7
8
9
10
11

3. 对比

methods: {
	pushShow(m){
		this.$router.push({
			name:'xiangqing',
			query:{
				id:m.id,
				title:m.title
			}
		})
	},
	replaceShow(m){
		this.$router.replace({
			name:'xiangqing',
			query:{
				id:m.id,
				title:m.title
			}
		})
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

router的forward、back、go属性

页面前进后退按钮

<template>
	<div class="col-xs-offset-2 col-xs-8">
		<div class="page-header">
			<h2>Vue Router Demo</h2>
			<button @click="back">后退</button>
			<button @click="forward">前进</button>
			<button @click="test">测试一下go</button>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Banner',
		methods: {
			back(){
				this.$router.back()
				// console.log(this.$router)
			},
			forward(){
				this.$router.forward()
			},
			test(){
				this.$router.go(3)
			}
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28