八、【Vue-Router】编程式路由导航

八、编程式路由导航

1、什么是编程式路由导航

就是不借助<router-link> 实现路由跳转，让路由跳转更加灵活！

---

2、需求

---

3、CODE简单改造（源码请回翻上一节）

1、CommonTitle.vue

<template>
    <div>
        <div class="page-header"><h2>Vue Router Demo</h2></div>
        <button @click="back">后退</button>
        <button @click="forward">前进</button>
    </div>
</template>

<script>
	export default {
		name:'CommonTitle',
        methods: {
            back(){
				// ...
            },
            forward(){
				// ...
            },
        }
	}
</script>

2、Message.vue

<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<router-link :to="{
						///path: '/home/message/details',
						name: 'detail', // 是不是简单多了？！！！
						params: m
					}"
				>
					{{m.title}}
				</router-link>

				<button @click="pushClick">push查看</button>
				<button @click="replaceClick">replace查看</button>
			</li>
		</ul>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data(){
			return {
				messageList:[
					{ id: '001', title: '小道消息', desc: '介个就是小道消息'},
					{ id: '002', title: '大道消息', desc: '介个就是大道消息'},
					{ id: '003', title: '大道消息Plus', desc: '介个就是大道消息Plus'}
				]
			}
		},
		methods: {
			pushClick(){
				console.log(this.$router)
			},
			replaceClick(){
				// ...
			}
		}
	}
</script>

3、通过Message的pushClick看一下$router

---

4、CODE（push和replace改造）

1、Message.vue

<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- ... -->
				<button @click="pushClick(m)">push查看</button>
				<button @click="replaceClick(m)">replace查看</button>
			</li>
		</ul>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		methods: {
			(m){
				this.$router.push({
					name: 'detail',
					params: m
				})
			},
			replaceClick(m){
				this.$router.replace({
					name: 'detail',
					params: m
				})
			}
		}
	}
</script>

2、Result

pushClick 和 replaceClick 运行结果正常

---

5、CODE（back和forward改造）

1、CommonTitle.vue

back(){
    this.$router.back()
},
forward(){
    this.$router.forward()
}

2、Result

back 和 forward 运行结果正常

3、this.$router.go()

go方法接收一个数字参数，+n就是 forward n步，-n 就是 back n步，n 为 0 时刷新当前页面

---

6、总结

1. 作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活

2. 具体编码：

   //$router的两个API  [push/replace]
   this.$router.push({
      name:'xiangqing',
         params:{
            id:xxx,
            title:xxx
         }
   })
   
   this.$router.replace({
      name:'xiangqing',
         params:{
            id:xxx,
            title:xxx
         }
   })
   
   openNewWindow(id){
       let route2 = this.$router.resolve({
           name:'ourserve',    //这里是跳转页面的name
           query:{
               id:id   //要传的参数
           }
       })
       window.open(route2.href,'_blank') //打开新的页面
   },
   
   this.$router.forward() //前进
   this.$router.back() //后退
   this.$router.go(num) //可前进也可后退，传数字以达到前进后退的目的