vue2页面内跳转

vue2页面跳转问题

相信大家在做一个系统的前端界面的时候，难免会遇到一些令人头疼的问题，比如页面的跳转。接下来我给大家总结一下:

1:rounter-link跳转

这个方法一般是在行内样式里面实现的:

//直接跳转
1.<router-link to="/Information" class="router-test">
查看个人信息
//带参数的跳转
2.<router-link :to="{path:'testDemo',query:{setid:123456}}">
 <button>登录界面</button>
</router-link>
 
3.<router-link :to="{name:'testDemo',params:{setid:1111222}}">
 <button>注册界面</button>
</router-link>
</router-link>

2.this.$router.push()

这个方法是方便而且用的很多的(个人理解)

methods:{
goto(path){
	console.log("即将跳转"),
	//这一步是为了验证是否跳转成功，如果成功就会打印，否则出错
	this.$router.push(path)
	//这一步就是跳转语句，path是形参,在template里面应该写一个实参传参数引进来
},
}

其实在这一步之前需要现在.vue组件里添加标签，格式如下:

<div id="app">
<p>
    
    
    
    <router-link to="/1">进入下一个界面router-link>
p>


<router-view>router-view>
div>

第二步，我们要在main.js文件里面进行路由的配置，（路由就像是学校的保安，出去之前要先给他看请假条），格式如下:


第三步我们需要在app.vue里面引用，这就是前面步骤完成之后，接下来需要做的操作:

3.a标签

我们学过html都知道a标签可以实现页面跳转，但是只能引入一个外部链接，而不能实现路由跳转，例如:

1.<a href="http://www.baidu.com">
<button>点击跳转button>
a>

以上就是我在vue2中所遇到的一些问题与经验，希望能够帮助到大家.