目录
3.2cnpm install --save less less-loader@5命令
4.1.2创建路由组件【一般放在views|pages文件夹】
项目视频:
1、项目主要介绍
2、vue-cli脚手架初始化项目
进入项目目录PROJECT-SHP,在终端执行vue create app(执行该命令的前提是:安装了node+webpack+淘宝镜像cnpm【npm install -g cnpm 】)命令(后续步骤参照vue2.0——第三天(侦听器、计算属性、vue-cli、vue组件))
2.1项目的其他配置
2.1.1项目运行的时候,让浏览器自动打开
vue的webpack自动打开浏览器跳转到了http://0.0.0.0:8080/
解决办法:
2.1.2eslint检验功能关闭
关闭eslint检验功能就可以不会报错
2.1.3src文件夹简写方法,配置别名
3、Header与Footer非路由组件
3.1直接使用现有的静态的html+css
3.2cnpm install --save less less-loader@5命令
- 咱们项目采用的less样式,浏览器不识别less样式,需要通过less、less-loader【安装五版本的】进行处理less,把less样式变为css样式,浏览器才可以识别。
- 如果想让组件识别less样式,需要在style标签的身上加上lang=less
3.3在Vue.js中引入、注册、使用Header和Footer组件
4、完成路由组件搭建
4.1项目路由分析
4.1.1安装vue-router
cnpm install --save vue-router
4.1.2创建路由组件【一般放在views|pages文件夹】
4.1.3配置路由
4.1.4路由的跳转
路由的跳转就两种形式:
- 声明式导航(router-link:务必要有to属性)
- 编程式导航push||replace
编程式导航更好用:因为可以书写自己的业务逻辑
4.2Footer组件显示与隐藏
首页|搜索底部是有Footer组件,而登录注册是没有Footer组件
Footer组件显示|隐藏,选择v-show|v-if
第一种方法:通过$route.path实现
解决:不推荐,如果有大量的路由链接需要写很多
第二种方法:路由元信息(推荐使用)
4.3路由传递参数
- params参数:路由需要占位,程序就崩了,属于URL当中一部分
- query参数:路由不需要占位,写法类似于ajax当中query参数
4.3.1收集表单数据
4.3.2路由传递参数:字符串形式
4.3.3路由传递参数:模板字符串
4.3.4路由传递参数:对象
4.3.5路由传递参数相关面试题
1:路由传递参数(对象写法)path是否可以结合params参数一起使用?
不可以:不能这样书写,程序会崩掉
2:如何指定params参数可传可不传?
3:params参数可以传递也可以不传递,但是如果传递是空串,如何解决?
4:如果指定name与params配置, 但params中数据是一个"", 无法跳转,路径会出问题
5: 路由组件能不能传递props数据?