Vue学习第五天（路由相关）

Vue学习第五天（路由相关）
今天主要学习了vue中ref关键字和路由相关的知识点
对于ref，可以理解为引用，当我们在一个传统的html标签上使用这个标签以后

<login ref="login"></login>

我们当前Vue实例就能使用this.$refs调用到使用ref引用的标签，值得注意的是，我们拿到的是一个dom元素，我们可以对它进行各种原生js操作，其中当然包括，改变它的值

var vue = new Vue({
				el:'#app3',
				data:{
					list: [
						'天涯海角不如你',
						'苔痕上阶绿，草色入帘青',
						'谈笑有鸿儒，往来无白丁',
						'可以调素琴，阅金经',
						'无丝竹之乱耳，无案牍之劳形'
					]
				},
				methods:{
					push:function(){
						//可以通过ref获取到我们的dom元素
						var myh3 = this.$refs.mytext1
						console.log(myh3.innerText)
					},
					exchange:function(){
						//可以使用this.$refs.login获取到模板元素
						var ele = this.$refs.login
						console.log(ele)
						//在login元素里面有一个$el属性，根据这个属性可以追根到模板中每一个元素
						ele.$el.firstElementChild.innerText = this.list[0]
					}
				},
				components:{
					login:{
						template:'#temp2'
					}
				}
			})

此时，我们的html代码如下

<div id="app3">
			<h2 ref="mytext1">我的一个道姑朋友</h2>
			<button v-on:click="push">戳我</button>
			<div>------------------------------------</div>
			<login ref="login"></login>
			<button v-on:click="exchange">触发</button>
		</div>
		<template id="temp2">
			<div>
				<h2 id="text1">我的一个道姑朋友</h2>
				<h2 id="text2">你的酒馆对我打了烊</h2>
			</div>
		</template>

不难看出，我们实现了vue实例对于组件数据的传输，加上昨天学习的实例对vue实例的控制，我们实现了数据的双向通信
接下来，我们继续学习vue,下面要介绍的是vue中的路由，要使用路由先解释下路由的区别，路由还有区别，对，你没听错，路由可以简单的分为，前端路由和后端路由

1. 前端路由：通过hash完成单页面应用的跳转
2. 后端路由：我们服务器上的资源，为了方便获取使用url一一映射，这就是后端路由
   在我的理解中，前端路由就是不依赖后端实现组件的切换，它最大的特点就是，我们会在url上面看到一个#，就像这样http://127.0.0.1:8848/day5/rounter.html#/login
   要使用路由就要先引入相应的js，我们可以直接去官网搞一份下来，用标签引入到我们的html中，引入以后，我们就可以使用vue-router的构造方法，下面展示一个路由的构造方法

//引入相应的js对象以后，我们就得到了相应的VueRouter构造函数
			var routerobj = new VueRouter({
				routes:[ //路由匹配规则
					//在这里每一条规则都是一个对象，每个对象需要拥有两个属性
					//1. path：监听的url地址
					//2. component,表示对应的组件，如果路由匹配了path,则可以获取到相应的组件
					//{path:'/', component:login},
					{path:'/', redirect:'/login'},
					{path:'/login', component:login},
					{path:'/register/:id/:name', component:register}
				]
			})

不难看出，关键就在于，我们构建的对象中的path和后面表示的对象，它可以是一个容器，也可以是一个链接，当页面请求匹配到path，就会触发后面的组件，使之显形，但是，这样做的有前提

1. 路由需要挂载到vue实例
2. 需要在页面上为其放置标签

var vue = new Vue({
				el:'#app4',
				data:{
					
				},
				methods:{
					
				},
				//将路由对象和实例关联起来
				router:routerobj
			})

html代码段

<div id="app4">
			<!--我们可以使用a标签触发路由，继而引发相应的容器，也可以使用vue官方提供的router-link -->
			<!--
			<a href="#/login">login</a>
			<a href="#/register">register</a>
			-->
			<router-link to="/login?id=10">login</router-link>
			<router-link to="/register/10/站合肥">register</router-link>
			<transition mode="out-in">
				<router-view></router-view>
			</transition>
		</div>

在此处，我们有两种方法触发路由

1. 直接使用a标签触发url，不过要加上完整路由
2. 使用router-link标签，指定路由url即可
   在实例中，我们也完成了传值操作，虽然并不是很能理解这样做的意义，但是确实可以，在这里我们要做一个区分，就是我们如果使用url?param=10，这样的url传值方式，我们会在我们的this.$route.query中获取到我们的请求参数，而如果我们使用path{:}^{\prime }/register/:id/:name这样的方式传值，最后的数据将在this.$route.params中按照json数据的形式存在，我们可以比较容易地获取到
   下面介绍嵌套路由的相关知识，这是一个新知识，不过也好写，借助于children关键字即可实现，我们写的子级路由不能和父级路由平级，而是应当属于父级路由

var account = {
				template:'#temp4'
			}
			var login = {
				template: '<h2>登录组件</h2>'
			}
			var register = {
				template: '<h2>注册组件</h2>'
			}
			var routeobj = new VueRouter({
				routes:[
					{
						path:'/account', 
						component:account,
						children:[
							//子路由前面不要加/
							{path:'login', component:login},
							{path:'register', component:register}
						]
					}
					// {path:'/account/login', component:login},
					// {path:'/account/register', component:register}
					//如果使用子路由，子路由的位置不可以和父级路由平级，而是应该使用children属性
					
				]
			})

子级路由的path不需要加上/，这个需要注意下，下面是html代码

<div id="app5">
			<router-link to="/account">account</router-link>
			<router-view></router-view>
		</div>
		<template id="temp4">
			<div>
				<h2>我的一个道姑朋友</h2>
				<router-link to="/account/login">登陆</router-link>
				<router-link to="/account/register">注册</router-link>
				<router-view></router-view>
			</div>
		</template>

有时候一次路由，我们会想要把多个组件都显示出来，所以这就需要，我们把一个url映射到多个容器上，就像下面这样

var header = {
				template:'#temp1',
			}
			var left = {
				template:'#temp2',
			}
			var right = {
				template:'#temp3',
			}
			var routerobj = new VueRouter({
				routes:[
					//当页面中存在多个<router-view></router-view>时，我们选要使用name加以区分
					//同时，我们还应该在这里，将component替换为components,放置多个容器
					{
						path:'/', 
						components:{
							default:header,
							left:left,
							right:right
						},
					},
				]
			})

三个容器对应的html代码如下

<div id="app6">
			<router-view></router-view>
			<router-view name="left"></router-view>
			<router-view name="right"></router-view>
		</div>
		<template id="temp1">
			<div>
				<h2>Head区域</h2>
			</div>
		</template>
		<template id="temp2">
			<div>
				<h2>Left区域</h2>
			</div>
		</template>
		<template id="temp3">
			<div>
				<h2>Right区域</h2>
			</div>
		</template>

为了对三个router-view标签加以区分，我们给标签加上了name属性，我们可以用这种方式，将不同的标签渲染到页面之上
今天就到这里，希望这场浩劫早日结束，为之则易，不为则难