41 - 综合案例 -首页

分析: 配路由 + 实现功能

1. 配路由

        (1). 首页和 详情，两个一级路由
        (2). 首页内四个可切换页面(嵌套二级路由)

2. 实现功能

        (1).  首页请求染
        (2). 跳转传参 到 详情页，详情页染
        (3). 组件缓存，优化性能

一. 定义一级路由页面

        (1). views / xxx.vue 定义一级路由组件

        (2). router / index.js 定义一级路由

        (3). main.js 注册路由

        (4). App.vue 预留路由输出位置 

二. 定义二级路由页面 (路由嵌套)

         (1). views / xxx.vue 定义二级路由组件

         (2). router / index.js 定义二级路由

         (3). Layout.vue 首页预留路由输出位置 

        

三. 底部导航高亮

        (1). 将 a标签,替换成router-link (to)

        (2). 结合高亮类名实现效果(router-link-active 模糊匹配)

四. 功能实现

        (1). 首页列表组件请求渲染

        (2). 跳转到详情页(两种方式传参)

                        1. 查询参数传参(适合多个参数的情况)

                        2. 动态路由传参(单个参数更优雅方便)

 

        (3). 详情页组件请求渲染 

五. 总结