vue-day3-组件-路由

组件:

就是起到 封装代码,模板多处重用的作用。

  • head导入vue.js
  • body底部 导入自己的js文件
  • 必须要建立vue对象
    vue-day3-组件-路由_第1张图片
    1.定义模板template

vue-day3-组件-路由_第2张图片
2.vue.compent 定义组件
vue-day3-组件-路由_第3张图片
3.调用组件
vue-day3-组件-路由_第4张图片

定义私有组件

1 定义template
如上一样
2 创建组件
vue-day3-组件-路由_第5张图片
3 调用
如上一样的

路由

导入vue.js
导入vue-router.js
1 写跳转连接

2 写组件模板

3创建 vue,vueRouter对象
4 放置 router-view

1 写跳转链接

vue-day3-组件-路由_第6张图片

2 js写定义两个组件模板
vue-day3-组件-路由_第7张图片

3 创建vue vue-Router对象
易错点: 创建的是组件,不是模板
vuerouter里面也是组件 不是模板参数
vue-day3-组件-路由_第8张图片
vue-day3-组件-路由_第9张图片
4 放置routerview
vue-day3-组件-路由_第10张图片

routerlink标签替换a标签

注意格式vue-day3-组件-路由_第11张图片

重定向

vue-day3-组件-路由_第12张图片

每次进入根目录,就转到/register2222

linkactiveclass 的使用

这个唯一的一个作用就是:
当前浏览器是在哪个标签,对应标签class里面多一个linkactiveclass的属性。
vue-day3-组件-路由_第13张图片
可以把 router-link-actvie 改成别的名字。
在 Vuerouter对象里面改
vue-day3-组件-路由_第14张图片

vue-day3-组件-路由_第15张图片

vue过渡动画

执行的4个流程,
vue-day3-组件-路由_第16张图片vue-day3-组件-路由_第17张图片

获得路由参数

路由匹配只匹配/login ?后面的当参数 不匹配
在这里插入图片描述

js里面

vue-day3-组件-路由_第18张图片
this. r o u t e t h i s . route this. routethis.route.query
vue-day3-组件-路由_第19张图片

参数显示出来

vue-day3-组件-路由_第20张图片

vue-day3-组件-路由_第21张图片

带两个参数

在这里插入图片描述
在这里插入图片描述

第二种路由参数方式。

在这里插入图片描述vue-day3-组件-路由_第22张图片

如何拿到参数?
vue-day3-组件-路由_第23张图片

vue-day3-组件-路由_第24张图片

路由嵌套children 属性

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

vue-day3-组件-路由_第25张图片

childen 没有/符号 开头 避坑

vue-day3-组件-路由_第26张图片
vue-day3-组件-路由_第27张图片
/account 跳转account组件
vue-day3-组件-路由_第28张图片
/account /login 跳转 login组件

/account /register 跳转 register组件

经典布局

vue-day3-组件-路由_第29张图片
vue-day3-组件-路由_第30张图片

vue-day3-组件-路由_第31张图片

你可能感兴趣的:(前端)