自学内容网 自学内容网

【无标题】

首先配置路由

  •  一级路由:在routes中配置首页Layout和面经详情ArticleDetail

  • 二级路由:在首页Layout的路由配置中配置children路由,分别是列表,收藏,喜欢,我的

其次在首页Layout中用router-link替换a标签,并使用类a.router-link-active进行模糊匹配,达到点击链接高亮显示的效果


最后用router-view标签在Layout组件中用于匹配到的二级路组件的展示

 

实现功能

  1. 页面请求渲染(Article.vue中)

  2. 跳转传参到详情页,详情页渲染

  3. 组件缓存,优化性能  

 

v-for渲染 

 

给文章注册点击事件,点击跳转(Article.vue)到面经详情中

 

 

面经详情中通过params接收

 

首页Layout是空白,可以将之重定向到其他子路由的路径中

 

详情页点击返回无效果,在详情页中注册点击事件,跳转返回上一页$router.back()

 

点击面经页面的某个文章了解面经详情,也就是点击Article页面文章,跳转到ArticleDetail页面,跳转时一并传参id。
到面经详情之后,同样进行get请求参数,不同于面经页面的是,这里get请求的地址栏地址需要加上传过来的id,就能获取对应的参数

 

进行渲染 

 

 从面经页面跳转到面经详情时有一瞬间空白,这是因为请求数据需要时间。给渲染加上一个判断v-if ,等数据请求过来再渲染

 


原文地址:https://blog.csdn.net/m0_63178019/article/details/144401808

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!