vue-day3-组件-路由

组件:

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

  • 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组件

经典布局

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

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值