组件:
就是起到 封装代码,模板多处重用的作用。
- head导入vue.js
- body底部 导入自己的js文件
- 必须要建立vue对象
1.定义模板template
2.vue.compent 定义组件
3.调用组件
定义私有组件
1 定义template
如上一样
2 创建组件
3 调用
如上一样的
路由
导入vue.js
导入vue-router.js
1 写跳转连接
2 写组件模板
3创建 vue,vueRouter对象
4 放置 router-view
1 写跳转链接
2 js写定义两个组件模板
3 创建vue vue-Router对象
易错点: 创建的是组件,不是模板
vuerouter里面也是组件 不是模板参数
4 放置routerview
routerlink标签替换a标签
注意格式
重定向
每次进入根目录,就转到/register2222
linkactiveclass 的使用
这个唯一的一个作用就是:
当前浏览器是在哪个标签,对应标签class里面多一个linkactiveclass的属性。
可以把 router-link-actvie 改成别的名字。
在 Vuerouter对象里面改
vue过渡动画
执行的4个流程,
获得路由参数
路由匹配只匹配/login ?后面的当参数 不匹配
js里面
this.
r
o
u
t
e
t
h
i
s
.
route this.
routethis.route.query
参数显示出来
带两个参数
第二种路由参数方式。
如何拿到参数?
路由嵌套children 属性
childen 没有/符号 开头 避坑
/account 跳转account组件
/account /login 跳转 login组件
/account /register 跳转 register组件
经典布局