Vue学习记录(codewhy)——cli的使用、通过代码方式修改路由、router参数传递——params、query、全局导航守卫、keep-alive

cli的使用

在这里插入图片描述

Router

通过代码的方式修改路由

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

路由的嵌套使用

在这里插入图片描述
实现点击首页中的消息实现路由跳转 并且展示消息界面的内容
在这里插入图片描述
1.在index.js中配置home的children路由 注意news和message前面不加/
在这里插入图片描述
2.在index.js中的home后面声明homenews和homemessage 注意路径中不带home
在这里插入图片描述
3.在home.vue界面进行配置news和message路由的配置

router参数传递

params

在这里插入图片描述
在这里插入图片描述
1.配置路由格式 配置路径
在这里插入图片描述
2.进行拼接 在path后面跟上对应的值
在这里插入图片描述

query

在这里插入图片描述
如何在app.vue里面将数据传给profile
在这里插入图片描述

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

全局导航守卫

实现点击路由以后界面的title发生相应的改变
在这里插入图片描述

在这里插入图片描述
方法一、用声明周期函数create()
在每个组件界面添加create方法 进行设置 title
但是这样过于繁琐

方法二、直接在index.js中进行meta的配置
在这里插入图片描述
然后
在这里插入图片描述

keep-alive

keep-alive是vue内置的一个组件 可以使被包含的组件保留状态

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值