vue路由的跳转之:replace和push的区别;

4 篇文章 0 订阅

路由是vue框架的核心组件,但是我今天在学习路由这一块的时候,发现:replace和push都能实现跳转的效果,但是区别在于:replace不会向history插入记录,而push会向history插入,废话少说,直接上代码如下:

路由的跳转
</div>

<script type="text/javascript" src="vue.js"></script>
<!-- 引入路由插件 -->
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">

	var Login={
		template:`
			<div>我是登录页面</div>
		`,
	}
	var Register={
		template:`
			<div>我是注册页面</div>
		`,
	}
	var Buy={
		template:`
			<div>我要买东西</div>
		`,
	}
	//安装路由插件
	Vue.use(VueRouter);
	//创建路由对象
	var router= new VueRouter({
		//配置路由对象
		routes:[
			{path:'/login',name:'login',component:Login},
			{path:'/register',name:'register',component:Register},
			{path:'/buy',name:'buy',component:Buy},
		]
	})
	new Vue({
		el:'#app',
		router,
		template:`
			<div>
				<router-link to='/login'>去登录</router-link>
				|
				<router-link to='/register'>去注册</router-link>
				<div>
					<button @click='goregister'>我要去买东西</button>
					<button @click='back'>返回上一页</button>
				</div>
				<router-view></router-view>
			</div>
		`,
		data(){
			return {}
		},
		methods:{
			goregister(){
				**//push跟replace是达到同样效果,但是replace是不会向history插入记录
				// this.$router.push({path:'/register'})
				this.$router.replace({path:'/buy'})**
				
			},
			back(){
				this.$router.go(-1)
			}
		}
	})
</script>
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

周传伦

您的微薄的鼓励,是我前进的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值