vue 工作笔记

1.vue element-ui的el-input标签的使用：限制电话输入格式和输入字数
这里用到了oninput 和maxlength方法

 <el-input
                v-model="formData.linkPhone"
                placeholder="请输入联系电话"
                oninput="value=value.replace(/^\+|[^\d]/g,'')"
                maxlength="11"
                clearable
                :style="{width: '100%'}"!
              />

2.vue-router的使用 参考官网：https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html
（1）打开终端 下载router
命令： cnpm install vue-router（建议使用cnpm下载）或 npm install vue-router 或yarn add vue-router
（2）在src文件夹下新建router文件夹→新建index.js文件→配置index.js页面信息

index.js 配置信息如下：

import Vue from 'vue'
import Router from 'vue-router' //引入vue-router组件

Vue.use(Router)

（3）配置main.js信息

import router from './router'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

（4）在app.vue中写入router-view标签

<template>
  <div id="app">
    <router-view/> // 或<router-view></router-view> 是默认路由路径
  </div>
</template>

（5）嵌套路由的写法
①在页面中引入需要的组件
例如：

import Layout from '@/layout' //布局页面

②开始写路由（在写路由之前先简单了解一下静态路由和动态路由）
//constantRoutes 是静态路由，不需要动态权限判断

export const constantRoutes = []

//asyncRoutes 是动态路由，需要动态权限判断

export const asyncRoutes = []

动态路由 举例：

//这是一个动态路由
export const asyncRoutes = [
 //机构管理
  {//父级
    path: '/agency',
    component: Layout, //引入的布局组件
    redirect: '/agency/agenciesList', //默认路由
    name: 'agency',
    alwaysShow: true,
    //meta参数设置 角色权限、标题、图标
    meta: { role: ['provincialManager', 'cityManager'], title: '机构管理', icon: 'el-icon-office-building' },
    //子级 使用children
    children: [
      {
        path: 'agenciesList',
        name: 'agenciesList',
        component: () => import('@/views/Agency/AgenciesList'),//这个页面的路径
        meta: { role: ['provincialManager', 'cityManager'], title: '机构维护' }
      },
      {
        path: 'insertAgencies',
        name: 'insertAgencies',
        component: () => import('@/views/Agency/InsertAgencies'),
        hidden: true,
        meta: { role: ['provincialManager', 'cityManager'], title: '机构录入' }
      }
    ]
  },
]

静态路由 举例：

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    meta: { title: '登陆' },
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/home',
    children: [
      {
        path: 'home',
        component: () => import('@/views/home/index'),
        name: 'Home',
        meta: { title: '首页', icon: 'el-icon-house', affix: true }
      },
    ]
  },
]

在路由配置好后创建新的路由

// export default router
const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),//滚动条保持在顶部
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router 替换现有router的routes
}

export default router

知识延伸：
①scrollBehavior的使用(场景：每次路由跳转后手动使滚动条回到头部位置)

scrollBehavior(to,from,savePosition){
//to 要进入的目标路由对象，到哪里去
//from 离开的路由对象，哪里来
// savePosition 记录滚动条的坐标，点击前进/后退时记录值{x:？,y:？}
}

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

当我使用了浏览器后退键（或前进键）时，返回savedPosition,否则只要使用了页面中的跳转事件页面都会滚动到最上面。
②matcher的使用
替换现有router的routes

//方法一：
export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}
 //方法二：
router.matcher = new VueRouter({
  routes: newRoutes
}).matcher

3.静态路由与动态路由
区别
静态路由：不需要设置判断权限
动态路由：需要设置判断权限
优点：
静态路由：简单、高效、可靠、网路安全、转发效率高
动态路由：灵活，能够适时适应网络结构的变化，无需管理员手工维护，减轻管理员的工作负担
缺点
静态路由：不能灵活适应网络的动态变化
动态路由：占用网络宽带（用于传输路由信息）