0303路由的跳转

最新推荐文章于 2024-02-21 14:59:00 发布

wnashi_万石

最新推荐文章于 2024-02-21 14:59:00 发布

阅读量129

点赞数

分类专栏： 002_Vue零基础

本文链接：https://blog.youkuaiyun.com/w_wangewanbuhuidege/article/details/114343408

版权

002_Vue零基础专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue中不同路由跳转方法的区别与使用场景，包括通过<router-link>标签和this.$router.push()等方法实现页面跳转，并解释了它们如何影响浏览器历史记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

001_0303路由的跳转(h3)

路由的跳转方式有：
- 通过标签：<router-link to='/login'></router-link>
- 通过js控制跳转this.$router.push({path:'/login'})
区别：
- this.$router.push() 跳转到指定的url，会向history插入新记录
- this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
- this.$router.go(-1) 常用来做返回，读history里面的记录后退一个
vue-router中的对象：
$route 路由信息对象,只读对象
$router 路由操作对象,只写对象
源代码

<!DOCTYPE html>
<html>
<head>
	<title>路由的跳转</title>
</head>
<body>
	<div id="app">		
	</div>

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

		var Login_wanshi={
			template:`
				<div>我是登录页面</div>
			`,
		}
		var Register={
			template:`
				<div>我是注册页面</div>
			`,
		}
		var Buy={
			template:`
				<div>我要买东西</div>
			`,
		}
		//安装路由插件
		Vue.use(VueRouter);
		//创建路由对象
		var router= new VueRouter({
			//配置路由对象
			routes:[
				//name可有可无
				{path:'/login_dl',name:'login',component:Login_wanshi},
				{path:'/register',name:'register',component:Register},
				{path:'/buy',name:'buy',component:Buy},
			]
		})
		new Vue({
			el:'#app',
			router,
			template:`
				<div>
					<router-link to='/login_dl'>去登录</router-link>
					|
					<router-link to='/register'>去注册</router-link>
					<div>
						<button @click='gobuy'>我要去买东西</button>
						<button @click='back'>返回上一页</button>
					</div>
					<router-view></router-view>
				</div>
			`,
			data(){
				return {}
			},
			methods:{
				gobuy(){
					//push跟replace是达到同样效果，但是replace是不会向history插入记录
					 //this.$router.push({path:'/buy'})
					this.$router.replace({path:'/buy'})
					
				},
				back(){
					this.$router.go(-1)
				}
			}
		})
	</script>
</body>
</html>

浏览器界面