323°

福利贴,vue-admin后台管理系统,全文注释

# vue-admin-stepbystep

> A Vue.js project
### 项目背景
这是公司的一个项目的阉割版,可以用作模板,里面的技术点基本全部都有注释,全都有注释,全都有注释,重要事说三遍,
写注释很辛苦,给个小赞,github给个小start,鼓励鼓励码字的我,项目正在陆续的完善中。还有重申一点,我们是前端工程师,不是码农。

## 项目功能
- 1 登录
- 2 首页
- 3 退出
- 4 table页

## 项目技术点
- 1,使用vue
- 2,使用echarts 
- 3, 使用json-server (系列二写详细文档)
- 4, 使用node起一个简单的服务,服务于接口(系列二写详细文档)
- 5, 使用axios
- 6, vue-router的使用规则(异步加载,和同步加载)
- 7, 回话拦截的使用(localstorage or cookie)
- 8, 配合element-UI 
- 9, 修改组件里面的样式里面的坑
- 10, 打包时的优化
- 11, DNS优化
- 12, 配置本地代理,使用接口(系列二写详细文档)
- 13, 使用axios配合json-server 模拟增删改查(系列二写详细文档)
- 14, 使用nprogress 插件
- 15, 鲜为人知的element-UI 的滚动条
- 16, 栅格布局,大小屏适应配合媒体查询
- 17, css使用less 
- 18, 代码风格,个人风格,禁用了jslint 防止不懂得小伙伴抓狂
- 19, 兼容性的处理(系列二写详细文档)
## 项目搭建

- 1 `vue init webpack XX` 使用vue-cli 2.0

```html
Project name                            :默认
Project description                     :默认
Author                                  :默认
Vue build                               :选择 Runtime + Compiler
Install vue-router?                     :Y
Use ESLint to lint your code?           :Y 选择 Standard
Set up unit tests                       :n
Setup e2e tests with Nightwatch?        : n
Should we run `npm install` for you after the project has been created? (recommended) : Yes, use NPM
```

- 2 进入项目:cd vue-admin-stepbystep
- 3 运行项目:npm run dev

## 如何添加一个新的功能???

- 1 在 `components` 中新建一个文件夹(login),在文件中创建组件(Login.vue)
- 2 在 `router/index.js` 中导入组件(login.vue)
- 3 配置路由规则

## 在项目中使用 element-ui(其他自行gg加深映像)

- [ElementUI 文档](http://element-cn.eleme.io/#/zh-CN/component/installation)
- 安装:`npm i element-ui -S`

```js
// main.js

// 导入elementui - js
import ElementUI from 'element-ui'
// 导入elementui - css
import 'element-ui/lib/theme-chalk/index.css'
// 安装插件
Vue.use(ElementUI)
```

---

## 项目启动做了什么

- 1 在终端中运行:`npm run dev`,实际上就是运行了:`webpack-dev-server ...`
- 2 使用 webpack-dev-server 开启一个服务器
- 3 根据指定的入口 `src/main.js` 开始分析入口中使用到的模块
- 4 当遇到 `import` 的时候,webpack 就会加载这些模块内容(如果有重复模块,比如:Vue,实际上将来只会加载一次),遇到代码就执行这些代码
- 5 创建 Vue 实例,将 App 组件作为模板进行编译,并且将 App 组件中 template 的内容渲染在页面 #app 的位置

## 路由配置
- 1 异步加载路由
- 2 使用进度条插件
- 3 登录拦截 会话保持
```js
import Vue from 'vue'
import Router from 'vue-router'
//引入nprogress进度条
import NProgress from 'nprogress'
//引入nprogress进度条的样式
import 'nprogress/nprogress.css'
//在打包过程中每一个组件都会打包成一个js文件,如果不使用使用/* webpackChunkName: "home" */
//在打包的时候就会生成0.js,1.js等等,使用了之后就会打包成home.js
// 导入 Login 组件(注意,不要添加 .vue 后缀)
//这是路由的异步加载,!important,这是优化项目必须的

//引入home组件
const Home = () => import(/* webpackChunkName: "home" */ '@/components/home')
//引入登录组件
const Login = () => import(/* webpackChunkName: "home" */ '@/components/login')
//引入table组件
const Table = () => import(/* webpackChunkName: "home" */ '@/components/table/table')
//引入homeMain组件
const HomeMain = () => import('@/components/HomeMain')

//这里是同步加载
//import Login from '@/components/login/Login'

Vue.use(Router)

const router = new Router({
    mode: 'history',//开启了history模式,去除了#,
     // 在vue中,一般来说通过实例去访问某个属性的
     // vm.xxxx  vm.$set  vm.$refs  vm.$router
    routes: [
        {
            path: '/',
            redirect: '/homeMain'//路由的重定向
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/home',
            name: 'home',
            component: Home,
            // children 用来配置子路由,将来匹配的组件会展示在 Home 组件的 router-view 中
            // 对于子路由path来说:
            // 1 如果不是以 / 开头,那么,哈希值为: 父级path + / + 子级path
            //    也就是: /home/homeMain
            // 2 如果子级路由的path是以 / 开头的,那么将来的哈希值为:/users 不再带有父级的path了
            //    也就是:/homeMain
            //这是页面中的子路由,在页面中必须声明router-view作为出口
            children: [
                {
                    path: '/homeMain',
                    name: 'homeMain',
                    component: HomeMain
                },
                {
                    path: '/table',
                    name: 'table',
                    component:Table
                }
            ]
        }
    ]
});
// 给router配置导航守卫
// to: 去哪儿
// from: from 哪儿来
// next() :  next():放行   next('/login') 去login组件
// 在登录成功以后,将 token 存储到 localStorage 中
// 在 导航守卫 中先判断当前访问的页面是不是登录页面
// 如果是登录页面,直接放行(next())
// 如果不是登录页面,就从 localStorage 中获取 token,判断有没有登录
// 如果登录了,直接放行(next())
// 如果没有登录,就跳转到登录页面让用户登录(next('/login')
router.beforeEach((to, from, next) => {
//    开启进度条
    NProgress.start()
//    获取是否有token
    let token = localStorage.getItem('myToken')
    // 如果已经就是要去login了,就不需要拦截了
    if (to.path === '/login' || token) {
        next()
    }else {
        next('/login')
    }
    
});
router.afterEach(() => {
//    关闭进度条
    NProgress.done()
})

export default router
```
## 登录功能

- 1 安装:`npm i -S axios`
- 2 在 `Login.vue` 组件中导入 axios
- 3 使用 axios 根据接口文档来发送请求,完成登录
- 4 登录时设置token ,可以用localStorage cookie等任君选择
 ```html
 <div class="l-right">
            <div class="l-l">
                 <!-- @tab-click="handleClick" -->
                <el-tabs v-model="activeName">
                    <el-tab-pane label="用户登录" name="first">
                        <!-- el-form:自定义表单组件 -->
                        <!-- :model="form" 表单对象,用于收集收据 -->
                        <!-- label-width="80px":label的宽度 -->
                        <!-- el-form-item:表单项  -->
                        <el-form ref="form" status-icon :rules="rules" :model="form" label-width="80px">
                            <el-form-item  prop="username">
                                <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="iconfont icon-yonghuming"></el-input>
                            </el-form-item>
                            <el-form-item  prop="password">
                                <!-- 将来我们给组件注册事件的时候,可以会注册不上 -->
                                <!--@keyup.enter点击键盘的enter触发事件-->
                                <!-- .native: 注册事件,给组件的根元素注册事件 -->

                                <el-input type="password" v-model="form.password" placeholder="请输入密码" @keyup.enter.native="login" prefix-icon="iconfont icon-mima"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <!--使用@语法糖绑定事件-->
                                <el-button type="primary" @click="login">登录</el-button>
                                <el-button @click="reset">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="帅哥登录" name="second">长得很帅</el-tab-pane>
                </el-tabs>
            </div>
            
        </div>
    </div>
 ```
```js
 export default {
        data () {
            return {
//                定义一些变量,可以使用{{}}语法在页面中直接获取
                activeName: 'first',
                form: {
                    username: 'why',
                    password: "123456"
                },
                rules: {
                    // 用户名的校验
                    username: [
                        // 用户名是必须
//                        required是否必须
//                        message提示信息
//                        trigger如何触发
                        { required: true, message: '请输入用户名', trigger: 'change' },
                        { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'change' }
                    ],
                    // 密码的校验
                    password: [
                        { required: true, message: '请输入密码', trigger: 'change' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            login () {
//             先触发页面中的检验规则,不通过给提示,通过就向后台发送请求,
//           $refs是vue中获取页面的,在html中要写 ref="form"
             this.$refs.form.validate(async (valid) => {
                 if (valid) {
//                     使用axios向后台发送请求
//                  在es6中的箭头函数没有this绑定,可以打印出来指向的是vue实例,这点可以自行百度,加深映像
                     this.axios('/api/login').then( res => {
                         console.log(res.data[0])//用来查看接口里面的数据
                         let lg = res.data[0] //把数据赋值给变量
                         console.log(lg.username,lg.password)//主要用来查看数据
                         if(lg.username === this.form.username && lg.password==this.form.password){
                             localStorage.setItem('myToken',lg.username)//设置拦截,可以用cookie等,在控制台中的Application中查看
                             this.$message.success('恭喜你,登录成功')//登录成功的提示
                             this.$router.push('homeMain') //使用编程式导航路由进行跳转
                         }else {
                             this.$message.error('账号或者密码错误')//账号密码错误时的提示

                         }
                     })
                 }
             })
            },
            reset () {
                this.$refs.form.resetFields()//清空输入框中的信息
//                数据被我写死了,可以自行改动
            }
        }
  };
```
## 顶部和侧边
```html
<el-container>
            <!--给el-header设置 高度-->
            <el-header style="height: 70px;">
                <div class="logo">
                    <!--这里可以放一般网站的logo-->
                    <!--<img src="../assets/main/logo.png" alt="">-->
                </div>
                <div class="header-right">
                    <div class="logout"  @click="layout">
                        <!--javascript:;为了防止a标签的默认行为,-->
                        <a href="javascript:;">退出</a>
                    </div>
                    <div class="people">
                        <!--映入iconfont 的字体图标-->
                        <i class="iconfont icon-lianxirenwode"></i>
                        张三
                    </div>
                    <div class="call">
                        <i class="iconfont icon-lianxiwomen"></i>
                        联系我们
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside width="160px" background-color="#26292E">
                    <el-scrollbar style="height: 100%;">
                          <!-- el-menu: 导航菜单的组件 -->
                          <!-- default-active:默认高亮的菜单 -->
                          <!-- open close 展开和关闭的事件 -->
                          <!-- el-submenu: 子菜单 -->
                          <!-- el-menu-item-group: 子菜单中分组 -->
                          <!-- el-menu-item:子菜单中的每一项 -->
                          <!-- unique-opened: 保证只能打开一个子菜单 -->
                          <!-- router: 如果router为true,那么index就会作为路由的连接 -->
                          
                        <el-menu :unique-opened='true' :router="true" text-color="#ffffff" active-text-color="#cccccc">
                            <el-submenu index="1">
                                <template slot="title"><i class="iconfont icon-shouye"></i>
                                    <span @click="gomain">
                                        首页
                                    </span>
                                </template>
                            </el-submenu>
                        
                            <el-submenu index="2">
                                <template slot="title"><i class="iconfont icon-message-channel"></i>table</template>
                                <el-menu-item-group>
                                    <el-menu-item index="/table">table</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
                <el-container>
                    <!--使用element的自带的滚动条,官方文档没有-->
                    <el-scrollbar style="height: 100%;width: 100%;">
                    <el-main>
                         <keep-alive>
                            <!-- 这里是会被缓存的视图组件 -->
                            <!-- $route.meta.keepAlive:如果是true,
                                 说明是缓存组件,通过keep-alive这个标签把缓存组件显示出来 -->
                          <router-view v-if="$route.meta.keepAlive">
                          </router-view>
                         </keep-alive>
                      <!-- 这里是不被缓存的视图组件 -->
                      <router-view v-if="!$route.meta.keepAlive">
                      </router-view>
                    </el-main>
                    </el-scrollbar>
                </el-container>
            </el-container>
        </el-container>
```
```js
export default {
        created() {

        },
        data() {
            return {

            }
        },
        methods: {
            gomain() {
            //编程式导航
                this.$router.push('/homeMain')
            },
          //退出功能
            layout() {
//                退出功能要移除localStorage中的myToken
                localStorage.removeItem('myToken')
//                跳转到首页
                this.$router.push('login')
//                退出成功提示
                this.$message.success('退出成功了')
            },
            
        },
    }
```
## 首页
- 代码有点多截取一点,主要对echarts做了修改,x轴箭头呀,修改柱状图的样式呀等,还有element的栅格布局配合媒体查询
```js 
xAxis: {
       data: ["三月", "四月", "五月", "六月", "七月"],
        axisLine: {
            symbol: ['none', 'arrow'],
            lineStyle: {
            color: 'rgba(212,212,212,1)', // x坐标轴的轴线颜色 
                width: 1 //这里是坐标轴的宽度,为0就是不显示 
                }
                    }
            },
            yAxis: [{

            type: 'value',
            axisLabel: {
                show: false //这行代码控制着坐标轴x轴的文字是否显示 
            },
            splitLine: {
                show: false, // 网格线是否显示 
                // 改变样式 
            lineStyle: {
                color: '#EDEDED' // 修改网格线颜色 
                    }
            },
            axisLine: {
                lineStyle: {
                color: '#fff', // x坐标轴的轴线颜色 
                width: 0 //这里是坐标轴的宽度,为0就是不显示 
                    }
                }
        }],
```
## 表格的使用
```html
<div class="table">
        <div class="t-top">
            <!--使用el-input 要注意,他默认占父级100%的宽度-->
            <el-input v-model="query" placeholder="请输入内容"></el-input>
            <!--el-button 绑定点击事件向后台发送数据查询-->
            <!--在此处通常会涉及到模糊查询,此时我们还需要绑定keyup事件,向后台请求数据,然后渲染一个小的下拉框,我们需要做的是发送查询的字段给后台,
            后台使用sql语句模糊查询,我们渲染就可以-->
            <el-button type="primary" @click="search">查询</el-button>
        </div>
        <div class="t-bottom">
            
                <!-- el-table:表格组件 -->
                <!-- :data='tableData' 表格显示的数据 -->
                <!-- el-table-column:表格的一列 -->
                <!-- prop: 当前列要显示的数据 ,tableData内的数据-->
                <!-- label:表头 -->
                <!-- width: 这一列的宽度 -->
                <!--min-width:用来设置百分比-->
                 <!--:header-cell-style="{background:'red'}"-->
                <!--align="center"表格内的数据居中-->
                 
             <el-table
              :data="tableData"
              style="width: 100%"
              :header-cell-style="{background:'red'}"
              >
              <el-table-column
                prop="date"
                label="日期"
                align="center"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                align="center"
                width="180">
              </el-table-column>
              <!--如果不设置百分比,就自动分配剩余的宽度-->
              <el-table-column
                prop="address"
                align="center"
                label="地址">
              </el-table-column>
            </el-table>
        </div>
    </div>
```
```js 
export default {
      data() {
        return {
//          绑定的input 查询关键字
          query: '',
//          需要一个数组用来存放table的数据
//          这是element组件里面的,
            tableData: []
        }
      },
      mounted() {
//          在vue的生命周期的mounted中调用渲染列表
          this.initTable()
      },
      methods:{
          initTable() {
              this.axios('/api/table').then( res => {
                  console.log(res.data)//查看接口返回时什么样的数据,要常用
                  this.tableData = res.data //接口返回的是一个数组,直接可以赋值给table
              })
          },
          search() {
              
          }
      }
    }
```
## 改element-ui的样式注意!
```html
<!--使用scoped需要注意,使用的它之后,你就无法更改elelment组件中的样式-->
<style lang="less" scoped="scoped">
/*如果不想使用scoped,你就用父级的class把样式全部包裹起来,就不会相互影响页面的样式了*/
```
# 以下是一些概念性的东西,其他的功能系列二将会陆续完善
## 编程式导航

- 就是通过 JS 代码来实现路由的跳转功能

```js
// 注意:是 router 不是 route
// router用来实现路由跳转,route用来获取路由参数
// push 方法的参数为:要跳转到的路由地址(path)
this.$router.push('/home')
```
## 密码

- 给输入框组件添加 type="password" 就变为密码框状态了

```html
<el-input type="password" v-model="loginForm.password"></el-input>
```

## 登录拦截

- 说明:在没有登录的情况不应该让用户来访问除登录以外的任何页面

### 登录和拦截的整个流程说明

- 1 在登录成功以后,将 token 存储到 localStorage 中
- 2 在 导航守卫 中先判断当前访问的页面是不是登录页面
- 3 如果是登录页面,直接放行(next())
- 4 如果不是登录页面,就从 localStorage 中获取 token,判断有没有登录
- 5 如果登录了,直接放行(next())
- 6 如果没有登录,就跳转到登录页面让用户登录(next('/login'))

## token 机制的说明

- 在项目中,如果登录成功了,那么,服务器会给我们返回一个 token
- 这个 token 就是登录成功的标识
- 这个 token 就相当于使用 cookie+session 机制中的 sessionid

## 公司人员和项目开发流程

- 1 产品经理定制项目的需求
- 2 分配任务:先将所有的任务分配到项目组,然后,再由项目组具体分配给每个开发人员
- 3 开发:拿到 产品原型 + 需求文档 + UI 设计稿 资料,转化为 HTML 页面,完成功能
- 4 功能完成后,自己测试有没有 Bug
- 5 由测试人员来测试你的功能,当测试出 Bug 后,就会通过 禅道 这样的项目管理系统,来提出 Bug
- 6 由 自己 修改 测试人员提出来的 bug
- 7 最终,没有 bug 了,项目才会上线

```html
产品经理(Product Manager)
  提需求
  产出: 产品原型 + 需求文档
  原型设计软件:Axure 、墨刀

UI(设计)
  将 产品经理 给的 原型图 设计为 好看的UI稿

FE(前端)front-end
  产品原型 + 需求文档 + UI设计稿 ===> HTML页面

BE(后端) back-end
  给前端提供数据接口

测试人员
  产品原型 + 需求文档 + UI设计稿 来测试我们写的功能
  发现你的功能 与 需求 不一致,那就说明除Bug了,那么,测试人员就会提Bug
  Bug系统: 禅道

项目经理(管理技术)
  技术攻坚,与其他项目组人员沟通,分配任务 等
```

## vue 单文件组件中的 scoped

- 作用:给 `style` 标签添加 `scoped` 属性以后,样式只会对当前组件中的结构生效,而不会影响到其他组件

## vue 单文件组件中的 lang

- 作用:添加 `lang="less"` 后,就可以使用 less 语法了
- 但是需要自己安装:`npm i -D less less-loader`

## VSCode 中使用 Vetur 插件格式化单文件组件的 template

- 打开设置,配置:`"vetur.format.defaultFormatter.html": "js-beautify-html"`

## 接口调用的说明

- 注意:**所有接口都需要传递 token,只有传递了正确的 token,服务器才会将数据返回给前端**
- 如果没有传递`token`,服务器会返回 `401` ,告诉接口调用者,没有权限来访问这个接口

---

## cookie+session VS token

- [干掉状态:从 session 到 token](https://github.com/zqran/blog/issues/2)

## Git 使用

- [远程分支](https://blog.csdn.net/u012701023/article/details/79222731)

```bash
# 克隆仓库
git clone [仓库地址]

# 推送
git push [仓库地址] master

# 简化推送地址
git remote add XX [仓库地址]
git push -u XX master
# 第一次执行上面两条命令,以后只需要输入以下命令即可
git push XX

# 拉取
git pull [仓库地址] master
git pull XX master
```

## 路由参数分页

- 1 配置分页路由参数, 参数是可选的
  - 参数可选后, 路由就能够匹配: `/XX` 或者 `/XX/3`
- 2 使用路由来分页, 有两种情况需要处理:
- 3 第一种: 进入页面,就要根据当前路由参数中的页码,来获取到对应页的数据
- 4 第二种: 点击分页组件获取数据, 需要做两件事:
  - 4.1 获取到当前页的数据( 调用获取数据的方法 )
  - 4.2 修改哈希值为当前页码 ( this.$router.push() )
- 5 点击分页按钮获取数据的第二种思路:
  - 5.1 点击分页按钮, 触发了分组件的 pageChange 事件
  - 5.2 在 pageChange 事件中修改了路由( this.$router.push() )
  - 5.3 路由发生改变后, watch 中的 $route 监视到了路由的改变
  - 5.4 在 `$route(to) {}` 方法中, 通过参数 to 获取到当前页码, 重新调用获取数据的方法来获取当前页的数据
  
## 项目打包和优化

- 打包命令:`npm run build`

## 按需加载

- 1 修改 `router/index.js` 中导入组件的语法

```js
// 使用:
const Home = () => import('@/components/home/Home')
// 替换:
// import Home from '@/components/home/Home'

// 给打包生产的JS文件起名字
const Home = () => import(/* webpackChunkName: 'home' */ '@/components/home/Home')

// chunkName相同,将 goods 和 goods-add 两个组件,打包到一起
const XX = () => import(/* webpackChunkName: 'XX' */'@/components/XX')
const XXX = () => import(/* webpackChunkName: 'XX' */'@/components/XXX')
```

- 2 (*该步可省略*)修改 `/build/webpack.prod.conf.js` 中的chunkFilename

```js
{
  // [name] 代替 [id]
  chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
}
```

## 使用CDN

- [开源项目 CDN 加速服务](https://www.bootcdn.cn/)

- 1 在 `index.html` 中引入CDN提供的JS文件
- 2 在 `/build/webpack.base.conf.js` 中(resolve前面)添加配置 externals
- **注意**:通过CDN引入 element-ui 的样式文件后,就不需要在 main.js 中导入 element-ui 的CSS文件了。所以,直接注释掉 main.js 中的导入 element-ui 样式即可

- `externals`配置:

```js
externals: {
  // 键:表示 导入包语法 from 后面跟着的名称
  // 值:表示 script 引入JS文件时,在全局环境中的变量名称
  vue: 'Vue',
  axios: 'axios',
  'vue-router': 'VueRouter',
  'element-ui': 'ELEMENT',
  moment: 'moment',
  echarts: 'echarts',
}

import ElementUI from 'element-ui'
```

### 常用包CDN

- [vue](https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js)
- [vue-router](https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js)
- [axios](https://unpkg.com/axios/dist/axios.min.js)
- [element-ui JS](https://unpkg.com/element-ui/lib/index.js)
- [element-ui CSS](https://unpkg.com/element-ui/lib/theme-chalk/index.css)
- [moment](https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js)

- 说明:
  - 1 先在官方文档查找提供的CDN
  - 2 如果没有,在 `https://www.bootcdn.cn/` 或其他 CDN提供商 查找

```html
<!-- Include the Quill library -->
<script src="https://cdn.bootcss.com/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Quill JS Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<!-- Include stylesheet -->
<link href="https://cdn.bootcss.com/quill/1.3.4/quill.core.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.4/quill.snow.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.4/quill.bubble.min.css" rel="stylesheet">
```

### 移除console

```js
new webpack.optimize.UglifyJsPlugin({
  compress:{
    warnings: false,
    drop_debugger: true,
    drop_console: true
  }
})
```

## 缓存和保留组件状态

- [keep-alive](https://www.jianshu.com/p/0b0222954483)
- 解决方式:使用 `keep-alive` ,步骤如下:

```html
1 在需要被缓存组件的路由中添加 meta 属性
  meta 属性用来给路由添加一些元信息(其实,就是一些附加信息)
{
  path: '/',
  name: 'home',
  component: Home,
  // 需要被缓存
  meta: {
    keepAlive: true
  }
}

2 修改路由出口,替换为以下形式:
  根据 meta 是否有 keepAlive 属性,决定该路由是否被缓存
<keep-alive>
  <!-- 这里是会被缓存的视图组件 -->
  <router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<!-- 这里是不被缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
```

## 启用路由的 History 模式

- 通过在路由中添加 `mode: 'history'` 可以去掉 浏览器地址栏中的 #
- 在开发期间,只需要添加这个配置即可
- 但是,在项目打包以后,就会出现问题

```html
// 去掉 # 后,地址变为:

http://localhost:1111/home

那么,服务器需要正确处理 /goods 才能正确的响应内容,
但是,/home 不是服务端的接口,而是 用来在浏览器中实现 VueRouter 路由功能的
```

### 后端的处理方式

- 1 优先处理静态资源
- 2 对于非静态资源的请求,全部统一处理返回 index.html
- 3 当浏览器打开 index.html 就会加载 路由的js 文件,那么路由就会解析 URL 中的 /login 这种去掉#的路径了
## 待续中
[项目地址 https://github.com/whylisa/vue-admin-stepbystep)

原文链接:https://www.cnblogs.com/why210/p/10101889.html

全部评论: 0

    我有话说: