router-link
-
to
-
帮助我们生成a标签的href
-
锚点值代码维护不方便,如果需要改变锚点值名称
-
则需要改变 [使用次数 + 1(配置规则)] 个地方的代码
命名路由
-
1:给路由对象一个名称
{ name:'home',path:'/home',component:Home}
-
2:在router-link的to属性中描述这个规则
-
<router-link :to="{name:'home'}></router-link>"
-
通过名称找路由对象,获取其path,生成自己的href
-
大大降低维护成本,锚点值改变只用在main.js中改变path属性即可
阶段总结
-
vue-router使用步骤 : 1:引入 2:安装插件 3:创建路由实例 4:配置路由规则 5:将路由对象关联vue 6:留坑
-
router-link to=“/xxx” 命名路由
-
- 在路由规则对象中 加入name属性
- 在router-link中 :to="{ name:"xxx’} "
-
生僻API梳理:
-
- Vue.use(插件对象); // 过程中会注册一些全局组件,及给vm或者组件对象挂在属性
- 给vm及组件对象挂在的方式 : Object.defineProperty(Vue.prototype,’$router’,{
get:function () {
return 自己的router对象;
}
})
参数router-link,
-
Vue.prototype.xxx = {add:fn}
-
所有组件中,使用this.xxx就能拿到这个对象
-
查询字符串
-
1:配置
:to="{name:'detail',query:{id:hero.id} }"
-
2:规则
{name:'detail',path:'/detail',component:Detail}
-
3:获取
this.$route.query.id
-
4:生成
<a href="/detail?id=1">
-
path方式
-
4:生成
<a href="/detail/1">
-
1:配置
:to="{name:'detail',params:{id:hero.id} }"
-
2:规则
{ name:'detail',path:'/detail/:id'}
-
3:获取
this.$route.params.id
-
查询字符串配置参数
-
router-link一次
-
获取的时候一次
-
path方式配置参数
-
router-link一次
-
规则配置的时候声明位置
-
获取的时候一次
-
总结书写代码注意事项
-
path方式需要在路由规则中声明位置
vue-router中的对象
-
$route 路由信息对象,只读对象
-
$router 路由操作对象,只写对象
嵌套路由
-
市面上所谓的用单页应用框架开发多页应用
-
嵌套路由
-
案例
-
进入我的主页显示:电影、歌曲
-
代码思想
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦,如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可免费获取,包括答案解析。
95)]
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦,如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可免费获取,包括答案解析。
[外链图片转存中…(img-Dstmye8y-1713572684396)]