Vue 路由新手入门

文章目录

一. 路由简介

1.1 路由的优缺点和示例
1.2 路由的跳转原理
1.2 vue-router官方介绍

二. 路由的使用

2.1 路由的入门案例
2.2 路由的跳转方式
2.3 路由的传参和取值
2.4 路由嵌套

一. 路由简介

1.1 路由的优缺点和示例

整个webapp就一个HTML文件,里面的各个功能页面是Javascript通过hash或者history api来进行路由,并通过ajax拉取数据实现响应功能

优点：

分离前后端关注点,前端负责界面显示,后端负责数据存储和计算,各司其职,不会把前后端的逻辑混杂在一起
减轻服务器压力,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;
同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端;

缺点：

SEO问题,现在可以通过Prerender等技术解决一部分;
前进、后退、地址栏等,需要程序进行管理:3·书签,需要程序来提供支持;

1.2 路由的跳转原理

单页应用的路由模式有两种：

哈希模式(利用hashchange事件监听url的hash的改变)
history模式(使用此模式需要后台配合把接口都打到我们打包后的index.html上)

哈希模式原理:

window.addEventListener(hashchange', function(e){
console.log(e)
})

核心是锚点值的改变,我们监听到锚点值改变了就去局部改变页面数据,不做跳转。跟传统开发模式url改变后立刻发起请求,响应整个页面,渲染整个页面比路由的跳转用户体验更好;

锚点值:比如有2个组件,如果当前值是1就跳转到组件1;如果当前值是2就跳转到组件2。

路由使用示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>路由入门</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<a href="#/login">登录</a>
		<a href="#/reg">注册</a>
		<div id="app"></div>
	</body>
	<script>
		//1.根据id选择器拿到div
		var divObj = document.getElementById("app");
		//2.判断
		window.addEventListener('hashchange',function(e){
			//console.log(location.hash);
			if(location.hash=='#/login'){
				divObj.innerHTML="我是登录页面"
			}
			if(location.hash=='#/reg'){
				divObj.innerHTML="我是注册页面"
			}
		})
	</script>
</html>

1.2 vue-router官方介绍

Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

二. 路由的使用

2.1 路由的入门案例

前提是需要在HTML页面引入vue.js 和 vue-router.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>路由的入门案例</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js"></script>
	</head>
	<style>
		  #app a {
		    border: 2px solid rgb(109, 215, 223);
		    padding: 5px;
		    border-radius: 3px;
		    background: rgb(109, 215, 223);
		  }
		
		  #foo {
		    height: 200px;
		    background-color: rgb(128, 124, 121);
		  }
		
		  #bar {
		    height: 200px;
		    background-color: rgb(93, 175, 114);
		  }
		</style>
	<body>
		<div id="app">
			<p>
				<router-link to="/foo">Go to foo</router-link>
				<router-link to="/bar">Go to bar</router-link>
			</p>
			<!-- 路由匹配到的组件将渲染到这里 -->
			<router-view></router-view>
		</div>
	</body>
	<script>
		//1.定义路由组件，自定义组件
		var Foo = {
			template:`
				<div id="foo">foo</div>
			`
		}
		var Bar = {
			template:`
				<div id="bar">bar</div>
			`
		}
		//2.定义路由		每个路由都映射一个组件
		var routes = [
			{path:'/foo',component:Foo},
			{path:'/bar',component:Bar}
		]
		//3.创建router实例
		var router = new VueRouter({
			//routes:routes	//完整写法
			routes			//简写
		});
		//4.创建和挂键根实例
		var app = new Vue({
			router
		}).$mount('#app');
	</script>
</html>

2.2 路由的跳转方式

- 两种跳转方式：
1. 通过标签: <router-link to='/login'> </router-link>
2. 通过js控制跳转: this.$router.push((path:/login'))
- 区别：
1. this.$router.push()跳转到指定的url,会向history插入新记录
2. this.$router.replace()同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到到上一个页面；上一个记录是不存在的。
3. this.$router.go(-1)常用来做返回,读history里面的记录后退一个

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>路由的跳转方式</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script>
		//1.创建自定义组件
		var login = {template:`<div>登录页面</div>`}	//登录组件
		var reg = {template:`<div>注册页面</div>`}	//注册组件
		var buy = {template:`<div>购买页面</div>`}	//购买组件
		
		//2.创建路由对象
		var router = new VueRouter({
			routes:[
				{path:'/login',name:'登录',component:login},
				{path:'/reg',name:'注册',component:reg},
				{path:'/buy',name:'购买',component:buy}
			]
		});
		//3.创建vue对象，并进行渲染
		new Vue({
			el:"#app",
			router,
			template:`
				<div>
					<router-link to='/login'>登录</router-link>
					<router-link to='/reg'>注册</router-link>
					<div>
						<button @click='toBuy'>买东西</button>
						<button @click='back'>返回</button>
					</div>
					<router-view></router-view>
				</div>
			`,
			methods:{
				//两种方法的写作形式
				toBuy(){
					this.$router.replace({path:'/buy'})
				},
				back:function(){
					this.$router.go(-1);
				}
			}
		});
	</script>
</html>

图示：
在这里插入图片描述

2.3 路由的传参和取值

查询参数

配置(传参) :to="(name:‘login’,query:{id:loginid)}" to就是参数名
获取(取参) this.$route.query.id

路由参数

配置(传参) :to="(name:register’,params:{id:registerid) }"
配置路由的规则{ name:‘detail’,path:/detail/id")
获取this.$route.params.id

总结:

:to传参的属性里params是和name配对的 query和name或path都可以
使用路由参数必须要配置路由规则里面配置好参数名,否则刷新页面参数会丢失
js跳转路由传参和标签传参,路由相同而参数不同时页面不做刷新的问题

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>路由的传参和取值</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script type="text/javascript">
		//1.自定义组件
		var login ={
			template:`
				<div>
					<p>我是登录页面</p>
					<span>获取到的参数是：{{msg}}</span>
				</div>
			`,
			created:function(){
				this.msg = this.$route.query.id;
			}
		}
		
		var reg ={
			template:`
				<div>
					<p>我是注册页面</p>
					<span>获取到的参数是：{{str}}</span>
				</div>
			`,
			props:['str']
		}
		//2.创建路由对象
		var router = new VueRouter({
			routes:[
				//path : 跳转路径，component : 绑定自定义组件
				{path:'/login',name:'login',component:login},
				{path:'/reg/:str',name:'reg',props:true,component:reg}
			]
		});
		//3.创建vue对象
		new Vue({
			el:"#app",
			router,
			template:`
				<div>
					<router-link :to="{name:'login',query:{id:'123'}}">登录</router-link>
					<router-link :to="{name:'reg',params:{str:'注册测试'}}">注册</router-link>
					<button @click='show'>跳转显示</button>
					<router-view></router-view>
				</div>
			`,
			methods:{
				show(){
					this.$router.push({path:'/login',query:{id:'888'}})
				}
			}
		})
	</script>
</html>

2.4 路由嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>路由嵌套</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script>
		//1.定义导航组件
		var navigation ={
			template:`
				<div>
					<router-view></router-view>
					<router-link :to="{name:'navigation.index'}">首页</router-link> |
					<router-link :to="{name:'navigation.personal'}">个人中心</router-link> |
					<router-link :to="{name:'navigation.msg'}">咨询</router-link> |
					<router-link :to="{name:'navigation.mine'}">我的</router-link>
				</div>
			`
		}
		var index = {template:`<div>首页</div>`}
		var personal = {template:`<div>个人中心</div>`}
		var msg = {template:`<div>咨询</div>`}
		var mine = {template:`<div>我的</div>`}
		
		//2.创建路由对象
		var router = new VueRouter({
			routes:[
				{path:'', redirect:'/navigation'},
				//嵌套路由
				{
					path:'/navigation',
					name:'navigation',
					component:navigation,
					children:[
						{path:'',redirect:'/navigation/index'},	//配置嵌套路由
						{path:'index',name:'navigation.index',component:index},
						{path:'personal',name:'navigation.personal',component:personal},
						{path:'msg',name:'navigation.msg',component:msg},
						{path:'mine',name:'navigation.mine',component:mine}
					]
				}
			]
		});
		
		//3.创建vue对象
		new Vue({
			el:"#app",
			router,
			template:`
				<div>
					<router-view></router-view>
				</div>
			`
		});
	</script>
</html>

示例图：

在这里插入图片描述

chaimhao

发布了70 篇原创文章 · 获赞 114 · 访问量 1万+

私信关注