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.mytext1console.log(myh3.innerText)},exchange:function(){//可以使用this.$refs.login获取到模板元素var ele = this.$refs.loginconsole.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中的路由，要使用路由先解释下路由的区别，路由还有区别，对，你没听错，路由可以简单的分为，前端路由和后端路由

前端路由：通过hash完成单页面应用的跳转
后端路由：我们服务器上的资源，为了方便获取使用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，就会触发后面的组件，使之显形，但是，这样做的有前提

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

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>

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

直接使用a标签触发url，不过要加上完整路由
使用router-link标签，指定路由url即可
在实例中，我们也完成了传值操作，虽然并不是很能理解这样做的意义，但是确实可以，在这里我们要做一个区分，就是我们如果使用url?param=10，这样的url传值方式，我们会在我们的this.route.query中获取到我们的请求参数，而如果我们使用path:′/register/:id/:name这样的方式传值，最后的数据将在this.route.query中获取到我们的请求参数，而如果我们使用path:'/register/:id/:name这样的方式传值，最后的数据将在this.route.query中获取到我们的请求参数，而如果我们使用path:′/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属性，我们可以用这种方式，将不同的标签渲染到页面之上
今天就到这里，希望这场浩劫早日结束，为之则易，不为则难

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

Vue 学习第五天学习笔记
Vue 学习第五天 1. keyup事件 <div id="app"> <input type="text" v-model=" ...
好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
vue学习第五天（9月8号）
前后端分离开发之前端Vue工程安装ElementUI局部组件库 npm install element-ui -S 在入口文件main.js中全局导入ElementUI组件库 import Elem ...
vue学习：7、路由跳转
2019独角兽企业重金招聘Python工程师标准>>> <body><div id="app"></div></body ...
vue修改计算属性的值_「Vue学习记录五」计算属性和侦听器
1: 计算属性: (内置缓存机制) 当更改age的时候, fullName 函数不执行: 当更改fristName的时候, fullName 函数才执行 <div id = "app& ...
vue学习笔记(五)：对于vuex的理解 + 简单实例
优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...
Vue学习第三天路由Vue Route（9月6号）
1.创建Vue-demo-02工程路由的作用是用来跳转页面的但是Vue工程是spa工程,只存在一个html页面,其他全称为组件把组件当做页面进行跳转需要使用到Vue路由 SPA 单页web应用( ...
vue学习(十五) 过滤器简单实用
vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式 v-bind表达式由管道符指示 //过滤器调用时候的格式 {{ name ...
Vue学习（二）动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...

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

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

最新文章

热门文章