step4 slot的使用
<slot> 就是外部调用时,标签中的内容。如果外部调用时没有提供内容的话,那么它就会使用自己默认提供的内容,非常方便。
-这个字面意思确实难以理解,用代码解释
-首先定义Bar.vue组件替代最外层的nav
-然后在main.vue import 进来引用
-原来的nav标签就会变成这样写
-先看现在的效果
-一切正常,但是如果把Bar.vue中的slot注释,就没有这些导航图标了,所以我可以理解为使用了slot可以把不在Bar.vue的template中的代码引进来,不使用就直接使用Bar.vue的template模板了
--现在可以把里面的item元素也弄成一个BarItem.vue组件
--这里要知道一个新的指令v-link和它的activeClass配合
v-link 是一个用来让用户在 vue-router 应用的不同路径间跳转的指令。http://router.vuejs.org/zh-cn/link.html 详情看这里
= = 先上代码BarItem.vue
-script中的props是在main.vue传进来的参数,v-link中的replcace:true 是用了router.replace()而不是router.go()也就是不能后退(首页标签页切换就不让用户有后退的功能了),activeClass是当路由激活时加上的类
--main.vue现在的代码
--对了,记得把BarItem.vue引进来喔
--现在的效果还是像之前一样,但是已经实现组件化了
step5 菜单栏配置路由
--新建search.vue、message.vue、me.vue、home.vue,然后在router.js中做相应的配置
--这里动态组件载入就是常说的懒加载组件
当你在使用 Webpack 或者 Browserify 时,在基于异步组件编写的 Vue 项目时,也可以较为容易的实现惰性加载组件。不再是之前所述的直接引用一个组件,现在需要像下面这样通过定义一个函数返回一个组件:
--resolve这个参数有点难理解,实际就是用异步加载,用AMD风格的写法是
require(['./MyComponent.vue'],
function (MyComponent) {
// code here runs after MyComponent.vue is asynchronously loaded
.})
--五个路由都写好就可以随意切换tab了
step6 HomeTab编写
-想要达到这种效果
-homeTab这部分也是可以提取出组件作为各个tab的头部
-赞一下vue的错误提示,一开始死活显示不了,这错误提示还是很明显的
--用组件记得在js components中注册
--还有这个提示,注册了变量没
已更新github代码,不求打赏只求github小星星,跪求
https://github.com/sally2015/vue-project