路由的跳转

最新推荐文章于 2025-02-15 17:34:12 发布

原创最新推荐文章于 2025-02-15 17:34:12 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

Vuejs 专栏收录该内容

41 篇文章

订阅专栏

路由的跳转方式有：

通过标签：<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 lang="en">
<head>
	<meta charset="UTF-8">
	<title>路由跳转</title>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script type="text/javascript">
	//声明组件
	var Login = {
		template:`
		<div>
			我是登录页面
		</div>
		`
	}
	var Register = {
		template:`<div>
			我是注册页面
		</div>
		`
	}
	var Shopping = {
		template:`<div>
			购物页面
		</div>
		`
	}
	//安装路由插件
	Vue.use(VueRouter);
	//创建路由对象
	var router = new VueRouter({
		//配置路由对象
		routes:[
           {path:'/login',name:'login',component:Login},
           {path:'/register',name:'register',component:Register},
           {path:'/shopping',name:'shopping',component:Shopping}
		]
	})
	new Vue({
		el:'#app',
		router,
		template:`<div>
			<router-link to="/login">去登陆</router-link>
			|
			<router-link to="/register">去注册</router-link>
			<hr />
			<h1>js形式进行跳转</h1>
			<div>
				<button @click="goshopping">点击我去购物</button>
				<button @click="back">返回上一页</button>
			</div>
			<router-view></router-view>
		</div>
		`,
		data(){
			return {

			}
		},
		methods:{
            goshopping(){
            	//push跟replace是达到同样效果，但是replace是不会向history插入记录
            	this.$router.push({path:'/shopping'})
            },
            back(){
            	this.$router.go(-1)
            }
		}

	})
</script>
</html>

运行效果图：
在这里插入图片描述