1.vue-cli脚手架初始化项目
node+webpack+淘宝镜像
node_modules文件夹：项目依赖文件
public文件夹：
src文件夹
assert文件夹
components文件夹
App.vue：唯一的根组件
main.js:程序入口文件
2.eslint校验功能关闭：在根目录下创建vue.config.js
3.项目路由分析： vue-router
前端所谓路由：KV键值对
key：URL（地址栏中的路径）
value：相应的路由组件
项目分为上中下结构
路由组件：Home首页路由组件 Search路由组件 Login登录路由Register注册路由
非路由组件：Header 【首页 搜索页】有/Footer【首页 搜索页】有 登录注册页面没有
4.完成非路由组件header与footer业务
（1）书写静态页面（2）拆分组件（3）获取服务器的数据动态显示（4）完成相应的动态业务逻辑
5.路由组件的搭建
vue-router 路由组件有4个 Home Search Login Register
components文件夹:经常放置的非路由组件（共用的全局组件）
pages|views文件夹：经常放置路由文件
配置路由
项目中配置的路由一般放置在router文件夹中
路由组件与非路由组件的区别？
（1）路由组件一般放置在pages|views文件夹 非路由组件一般放置在components文件夹中（2）路由组件放置在router文件夹进行注册 非路由组件在使用时候 以标签形式存在
$route:一般获取路由信息（路径，query，params获取）
r
o
u
t
e
r
:
一般进行编程式导航进行路由跳转（
p
u
s
h
∣
r
e
p
l
a
c
e
实现）路由的跳转？路由的跳转有两种形式：声明式导航
r
o
u
t
e
r
−
l
i
n
k
，可以进行路由的跳转编程式导航
p
u
s
h
∣
r
e
p
l
a
c
e
可以进行路由的挑战编程式导航：声明式导航能做的编程式导航都能做编程式导航除了可以进行路由跳转还可以做一些其他的业务逻辑
6.
f
o
o
t
e
r
组件的显示与隐藏显示或者隐藏组件：
v
−
i
f
/
v
−
s
h
o
w
f
o
o
t
e
r
组件在
H
o
m
e
、
S
e
a
r
c
h
显示
F
o
o
t
e
r
组件
f
o
o
t
e
r
组件：在登录，注册时候是隐藏的根据组件身上的
router:一般进行编程式导航进行路由跳转（push|replace实现） 路由的跳转？ 路由的跳转有两种形式：声明式导航router-link，可以进行路由的跳转 编程式导航push|replace 可以进行路由的挑战 编程式导航：声明式导航能做的 编程式导航都能做 编程式导航除了可以进行路由跳转 还可以做一些其他的业务逻辑 6.footer组件的显示与隐藏 显示或者隐藏组件： v-if/ v-show footer组件 在Home、Search显示Footer组件 footer组件：在登录，注册时候是隐藏的 根据组件身上的
router:一般进行编程式导航进行路由跳转（push∣replace实现）路由的跳转？路由的跳转有两种形式：声明式导航router−link，可以进行路由的跳转编程式导航push∣replace可以进行路由的挑战编程式导航：声明式导航能做的编程式导航都能做编程式导航除了可以进行路由跳转还可以做一些其他的业务逻辑6.footer组件的显示与隐藏显示或者隐藏组件：v−if/v−showfooter组件在Home、Search显示Footer组件footer组件：在登录，注册时候是隐藏的根据组件身上的route获取当前的路由信息，通过路由路径判断footer显示与隐藏
配置路由的时候 可以黑路由添加路由元信息meta 路由需要配置对象 key不能随便写
路由传参：
路由的跳转方式：A到B
声明式导航：router-link（含有to属性），可以实现路由的跳转
编程式导航：利用的是组件实例中的KaTeX parse error: Expected 'EOF', got '&' at position 166: …ring /home?k=v&̲kv= ,不需要占位 …router属性：当前的这个属性，属性值Vuerouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加
r
o
u
t
e
r
∣
router|
router∣route属性
push：VueRouter类的一个实例
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
