vue2.0一起在懵逼的海洋里越陷越深(二)
承接上文vue2.0一起在懵逼的海洋里越陷越深(一)
说好了一起懵逼,那么我们继续下沉
在上一篇里已经将vue2.0需要的依赖都装齐了
那么接下来
因为vue最后生成的页面看似静态页面(对于静态页面这里有些偷鸡用法,不管你怎样,反正我已经露出了诡异的微笑?,再贴一个vue2.0 demo的项目地址,大爷有兴趣可进去看看演示,开心了就加个星),其实却是个SPA(单页面应用)
没错!就是一个SPA
作为一个SPA,当然有不同的地方
SPA与传统网页区别的地方是SPA具有前端路由来模拟页面跳转,当然这是众多不同之一,这篇只说前端路由。
上一篇中有安装vue-router组件,这个就是vue的前端路由
vue + vue-router简直是爽,页面跳转的速度简直是不要不要的
不光是用户体验上的提升,作为一名开发者,在使用了如vue,react等这类MVVM框架后,就不会再想回到jQuery的时代了。
前面搞了半天,现在要开始coding啦!
好的,用自己的小编辑器打开vue项目(我用的是sublime)
可以看到项目目录是这样子的
(插一句,如果喜欢这个sublime主题可以查看这篇文章)
与自己的目录对比发现少几个文件,那是没有什么关系的,接下来要做的就是去创建这些文件。
作为一个SPA,首先要有路由
从目录图片里可以看到main.js
这个文件,没错这个就是程序的入口
这个文件的内容是这样的
import Vue from 'vue'
import router from './router'import App from './App'/* eslint-disable no-new */
new Vue({router,render: h => h(App)
}).$mount('#app')
main.js
地址
这里用的是ES6的语法,使用import
来导入包
这里导入了vue包,还有两个文件,分别是router.js
和App.vue
.js
后缀是可以省略的(毕竟是亲生的,你不说导入什么类型的文件,肯定是自家人毕竟亲呀)
其实.vue
后缀也是可以省略的,我建议还是写一下,如果遇到两个同名文件就尴尬了。
好的,这个router.js
就是路由的输出口啦,
App.vue
就是目录里已经存在的那个模板文件啦,你的界面就从这里开始啦。
引入了包就可以开始设置路由和挂载模板了
顺带一提,可以看到在new Vue()
时传入了一个对象,但是这个对象却不是键值对,
是这样,这是ES6的一种语法,当引用的变量名和键名相同时,就可以简写成这样
如果还原来是这样的
new Vue({router: router,render: h => h(App)
}).$mount('app')
// 被简写成了
new Vue({router, // 这是ES6对象的简写,扩展开就是router: router// 箭头函数(=>)是ES6的新语法render: h => h(App) // 这里扩展开就是render: (h) => { return h(App) }
}).$mount('app')
PS:ES6的新语法现在网上文章已经有很多了,我之后也会发一版常用的语法
那么现在在src目录下创建router.js
文件
内容是这样的:
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'// 告诉vue要使用router
Vue.use(VueRouter)/* eslint-disable no-new */
// 实例化router对象
const router = new VueRouter({mode: 'hash', // 设置路由模式 可选值: "hash" | "history" | "abstract",默认"hash"linkActiveClass: 'u-link--Active', // 这是链接激活时的class// base: '/app/', // 这个是设置根目录路径,一般用不到,默认'/'routes // 挂载路由集合 后面会说
})
// 导出router对象
export default router
这是router.js
地址
这里引入了两个包vue
,vue-router
和一个包含路由集合的routes.js
文件
整个文件的逻辑就是,使用Vue.use()
方法告诉vue我们使用了路由
然后就大大方方的导出路由对象
这个时候main.js
里就可以接受到这里导出的路由对象,并挂载到vue对象上
在src目录下创建routes.js
文件
routes.js
是用来放置路由集合的文件
其实路由集合是可以写在router.js
里的,这里为什么不写在一起呢?
因为当路由集合变得庞大时,如果还是写在router.js
里,就会显得拥挤,不便于阅读
所以这里推荐单独写出来。
同时呢也可以创建路由所对应的模板文件(.vue
文件,我把它称为模板文件),Article.vue
和Home.vue
模板文件叫什么名由自己决定,于是就能看到这张图里所有文件都齐了
那么在编写routes.js
文件之前,需要先写好两个模板的内容(不然一会有没有成功都不清楚了,23333)
好的,贴一下home.vue
的内容
<template lang="pug">
.homeh1.l-ta--c Material Desgin
</template><script>export default {data () {return {}}}
</script><style lang="stylus">
</style>
vue模板是html结构的,这也是对界面编写最友好的方式
里面的<template> </template>
标签就是视图
<script></script>
就是js,这个没有争议
<style></style>
是写css的,这个也没有问题
但是当仔细看我的代码,发现里面html使用了pug,css使用了stylus
其实不用他们也是可行的,只是用pug和stylus写结构比较清晰
不用也可以的
如果要使用,请打开你的终端,给项目添加几个包
npm i pug stylus stylus-loader -D
里面的css的class(.l-ta--c
)看着有点懵逼的,可以看看使用BEM+emmet的css书写与命名技巧
好的,模板不需要太复杂,只要有字能显示就好了,至于Article.vue
也是一样的,这里就不贴了
Tips:模板里推荐有一个根元素,就像这里的.home
就是根元素,这样不容易混乱,结构会清晰
写好了模板就可以开始编写routes.js
了
先贴代码!
// 导入之前写好的两个模板
import Home from './components/Home.vue'
import Article from './components/Article.vue'// 编写路由集合
const routes = [{name: 'Home', // 路由名,这个字段是可选的path: '/', // 路由路径,这里是根路径所以是'/'component: Home // 模板}, // 这些是常用的{name: 'Article',path: '/article',component: Article}
]
// 导出路由集合
export default routes
然后是文件地址
最后导出了路由集合(routes
)后就可以在router.js
里使用了
于是,前面的router.js
里的routes
就有了。
现在进行最后一步,到App.vue
里添加路由
代码如下:
<template lang="pug">.appheader//- 制作一个跳转链接//- 这里不要直接用a链接跳转,那样会导致页面重载,//- 相比之下用router-link是高效的方案//- to属性就是链接的地址啦router-link(to="/") homerouter-link(to="/article") articlebodyer//- 路由地址所对应的模板将会被挂载到router-view标签上router-view
</template><script>export default {data () {return {}}}
</script><style lang="stylus">
</style>
地址
好了,到此为止就完成了路由搭建与使用了。
vue2.0一起在懵逼的海洋里越陷越深(二)相关推荐
- 【Vue2.0】—默认插槽、具名插槽、作用域插槽(二十四)
[Vue2.0]-默认插槽.具名插槽.作用域插槽(二十四) 默认插槽.具名插槽 Cateory.vue文件 <template><div class="cateory&qu ...
- vue2.0 与 bootstrap datetimepicker的结合使用
vue2.0 与 bootstrap datetimepicker的结合使用 1.在很多的项目中,我们都会用到日期插件,然后当我在vue中使用bootstrap datetimepicker时发现双向 ...
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
- 实现vue2.0响应式的基本思路
最近看了vue2.0源码关于响应式的实现,以下博文将通过简单的代码还原vue2.0关于响应式的实现思路. 注意,这里只是实现思路的还原,对于里面各种细节的实现,比如说数组里面数据的操作的监听,以及对象 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单
前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
- vue2.0 $router和$route的区别
转载自 vue2.0 $router和$route的区别 在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数 ...
- 【vue2.0进阶】案例:用Vuex实现一个简单的计算器
昨天我们学习了Veux的几个重要的核心概念.当然只讲概念还不够,必须要结合上案例才能理解得更深刻. 马上就开始我们今天的案例:用Vuex实现一个简单的网页计算器. 我们之前的章节说过,Vuex适合在较 ...
- 【vue2.0进阶篇】用transition组件轻松实现过渡效果
Vue系列连载又继续了,公众号和微信号都接到了伙伴们的催更,最近忙于工作,没来得及时更新<Vue2.0进阶>的教程文章,大家久等了. 这一节我们来学习如何利用Vue提供的transitio ...
- vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解
一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入v ...
- Vue2.0+ElementUI+PageHelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
最新文章
- 支持wince 系统的USB wifi 模组推荐
- tomcat,JVM内存设置
- sql服务器网页无法连接到服务器失败,SQL2008无法连接到服务器,用户’XX’登录失败(错误18456)解决方法...
- window.addeventlistener 不能调用方法_方法入门(基础篇五)
- boost::hana::flatten用法的测试程序
- mysql查看执行计划_MySql中如何使用 explain 查询 SQL 的执行计划
- day15 Ui自动化元素的定位
- Python函数参数值传递
- 俄国数学家称:“平行线可以相交”,却遭到质疑,死后12年被证实
- Android常见的设计模式详解
- js中apply使用方法小议(转载)
- junit单元测试诡异问题
- SqlServer系列笔记——游标
- 无法读源文件或磁盘的处理
- windows类书的学习心得
- 舍得网-开发问题(学习别人经验)
- Cloudera Manager集群报警,堆转储目录/tmp 或日志目录/var/log 可用空间小于 5.0 吉字节
- mysql webmail ubuntu12.04 imap_如何在Ubuntu 18.04 LTS上安装最新的Roundcube Webmail
- 为什么会发生通货膨胀
- SXT分布式缓存技术公开课的观后感