Vue编程式路由导航

一、使用

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

<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带params参数，to的字符串写法 --><!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; --><!-- 跳转路由并携带params参数，to的对象写法 --><router-link :to="{name:'xiangqing',query:{id:m.id,title:m.title}}">{{m.title}}</router-link><button @click="pushShow(m)">push查看</button><button @click="replaceShow(m)">replace查看</button></li></ul><hr><router-view></router-view></div>
</template><script>export default {name:'Message',data() {return {messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}},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}})}},}
</script>

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