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条记录