vue2

编程式路由导航

• 应用环境
• this.$router属性
• 编程式路由导航的两种跳转
• • 1. push跳转
  • 2. replace路由跳转
  • 3. 对比
• router的forward、back、go属性
• • 页面前进后退按钮

应用环境

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

this.$router属性 编程式路由导航的两种跳转 1. push跳转

	

		
		
			{{m.title}}
		
		push查看
	

pushShow方法

methods: {
	pushShow(m){
		this.$router.push({
			name:'xiangqing',
			query:{
				id:m.id,
				title:m.title
			}
		})
	},
},

页面效果

2. replace路由跳转

	

		
		
			{{m.title}}
		
		replace查看
	

replaceShow方法

methods: {
	replaceShow(m){
		this.$router.replace({
			name:'xiangqing',
			query:{
				id:m.id,
				title:m.title
			}
		})
	},
},

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
			}
		})
	}
},

router的forward、back、go属性 页面前进后退按钮