vue-route跳转

Posted 2021-02-02 zhaoliu100125

vue-route跳转方法有两种，第一种方法是使用内置的<router-link>组件，它会被渲染成一个 a 标签

<template >
    <div>
        <h1>首页</h1>
        <router-link to="/about>跳转到about</router-link>
</template>

　它的用法与一般的组件一样，to是一个prop，指定需要跳转的路径，当然也可以用v-bind动态设置。使用<router-link>在html5的History模式下会被拦截点击，避免浏览器重新加载页面。

<router-link>还有一些其他的prop，常用的有：

·tag:

　　tag 可以指定渲染成什么标签,比如<router-link to="/about" tag="li">;渲染的结果及时li标签,而不是a标签.
·replace:
　　使用replace不会留下History记录,所以导航后不能使用后退键返回上一个页面,如 <router-link to="/about" replace>

　　有时候跳转页面可能会在javascript里进行,类似于window.location.href,这时候可以用第二种跳转方法,使用router实例的方法.比如在 about.vue里,通过点击事件跳转:

//about.Vue
		<<template>
			<div>
				<h1>介绍页</h1>
				<button @click="handleRouter">跳转到user页面</button>
			</div>
		</template>
		<script>
			export default{
				methods:{
					handleRouter(){
						this.$route.push(‘/user/123‘)
					}
				}
			}
		</script>

　　

$route还有一些其他的方法：
·replace:
　　类似于<router-link>的replace功能，它不会向History添加新的记录，而是替换点。如：this.$route.replace(‘/user/123‘)
·go
　　类似于window.location.go(),在History向前或者后退多少步，参数是整数，如：
　　//后退1步
　　this.$route.go(-1);
　　//前进2步
　　this.$route.go(2)