【Vue-路由案例】面经基础版

<<回到导览

1.面经基础版

1.1.VueCli建项目

1.1.1.VueCli 自定义项目

1. 安装脚手架 (已安装)

   npm i @vue/cli -g
   

2. 创建项目

   vue create 项目名
   

3. 选择创建自定义项目选项，回车

   

4. 自定义项目（空格键为确认/取消），回车

   

5. 选择vue的版本

   

6. 是否使用history模式

   

7. 选择css预处理

   

8. 选择eslint规范

   

9. 选择校验的时机 （保存校验）

   

10. 选择配置文件的生成方式（放在单独的文件之中）

11. 是否保存预设，为预设命名

    

    当我们保存预设后，下次可以直接建立含有上面选项的项目
    

12. 项目创建完毕

1.1.2.ESlint代码规范

JavaScript Standard Style 规范说明：https://standardjs.com/rules-zhcn.html

• 通过eslint插件来实现自动修正

  

• 配置VSCode

  

  

  添加配置代码

  // 当保存的时候，eslint自动帮我们修复错误
  "editor.codeActionsOnSave": {
      "source.fixAll": true
  },
  // 保存代码，不自动格式化
  "editor.formatOnSave": false
  

1.2.项目路由

1.2.1.一级路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
// 一级路由
import Layout from '@/views/Layout.vue'
import ArticleDetail from '@/views/ArticleDetail.vue'

Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout
    },
    {
      path: '/detail',
      component: ArticleDetail
    }
  ]
})
export default router

1.2.2.二级配置路由

通过children配置项，可以进行路由嵌套，配置二级路由

1. 二级配置路由(view/index.js)

   routes: [
       // 一级路由
       {
         path: '/',
         component: Layout,
         children: [
         // 二级路由
           {
             path: '/article',
             component: Article
           },
           {
             path: '/collect',
             component: Collect
           },
           {
             path: '/like',
             component: Like
           },
           {
             path: '/user',
             component: User
           }
         ]
       },
       {
         path: '/detail',
         component: ArticleDetail
       }
     ]
   

2. 配置二级路由出口（Layout.vue）

    <div class="h5-wrapper">
       <div class="content">
         <!-- 二级路由出口 -->
         <router-view></router-view>
       </div>
       <nav class="tabbar">
         <router-link to="/article">面经</router-link>
         <router-link to="/collect">收藏</router-link>
         <router-link to="/like">喜欢</router-link>
         <router-link to="/user">我的</router-link>
       </nav>
     </div>
   

   一级路由的出口在App.vue中

   <div class="wrapper">
       <router-view></router-view>
   </div>
   

很多同学心里的路由应该是这样的

• 诚然，这样的路由更符合我们操作逻辑；

• 但是在我们最开始的路由图中，一级路由首页和二级路由都有个特点，都有导航条

• 所以首页和二级路由分为一类，没有导航条的面经详情分为一类

• 从路由出口的角度来看，一级路由出口在App.vue，二级路由出口在首页（Layout.vue），而导航条在一级路由页Layout.vue中，二级路由出口外

• 所以，首页和二级路由都有都有导航条，而面经详情页没有

• 说得有点绕，画个图方便理解一些（一级路由出口就是包裹、定位一级路由页的容器，二级亦然）

  

1.2.3.设置高亮

1. 将a标签替换为<router-link to="/xxx">XXX</router-link>

2. 设置高亮样式（也可以先自定义匹配类名）

   .router-link-active{
       font-weight: 700;
       color: orange;
   }
   

1.2.4.发生请求、渲染

安装axios:yarn add axios

接口文档：

请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get

接下来的操作无非是请求数据（created），循环渲染，这里我就省略了

1.2.5.跳转传参、再发请求

• 为盒子设置点击传参

  // 传参方式多样，可以自己选择
  @click="router.push(`/detail?id=${item.id}`)"
  

• 获取传递参数，将参数传给服务器，再将结果渲染即可

1.2.6.体验优化

1. 为首页重定向列表页

   加配置项redirect: '/article'

2. 为面经详情页添加返回上一页按钮

   @click="router.back()"
   

1.2.7.keep-alive

• 当路由被跳转后，原来所看到的组件就被销毁了，重新返回后组件又被重新创建了。
• 所以当点击返回上一页按钮，因为主页组件已被销毁，所以并不能回到进入面经详情页时，首页的位置
• 我们可以利用keep-alive组件，来缓存主页组件，来完成这个功能

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中

• App.vue

  <template>
    <div class="h5-wrapper">
      <keep-alive>
        <!-- 一级路由出口 -->
        <router-view></router-view>
      </keep-alive>
    </div>
  </template>
  

  以上代码，keep-alive包裹了一级路由出口，那么一级路由页都会被缓存；但是同为一级路由页的面经详情页，我们并不想其缓存（因为面经详情页太多了，浏览量多的画会影响性能），我们可以利用keep-alive的三个属性

  属性	效果
  include	组件名数组，只有匹配的组件会被缓存
  exclude	组件名数组，任何匹配的组件都不会被缓存
  max	最多可以缓存多少组件实例

• 上面代码可以改为(只显示了修改的部分)

  <!-- LayoutPage为组件名，没有组件名才会匹配组件名 -->
  <keep-alive :include="['LayoutPage']">
      <router-view></router-view>
  </keep-alive>
  

  缓存组件后，再返回首页，created，mounted等生命钩子并不会触发（因为组件没有被重新创建），如果我们要返回首页立即触发某些事件，我们可以利用keep-alive 的额外的两个生命周期钩子。

  生命周期钩子	触发时机
  activated	当组件被激活（使用）的时候触发
  deactivated	当组件不被使用的时候触发