Vue学习笔记

属性绑定

v-bind: 可以简写为 :

事件绑定

v-on: 简写为 @

双向绑定

• javascript 数据可以同步到表单标签
• 反过来用户在表单标签输入的新值也会同步到 javascript 这边

v-model

计算属性

• 普通方法调用必须加 ()，没有缓存功能
• 计算属性使用时就把它当属性来用，不加 ()，有缓存功能：
  • 一次计算后，会将结果缓存，下次再计算时，只要数据没有变化，不会重新计算，直接返回缓存结果
    
    

用axios向后端发送请求

后端发的数据再data里面

axios的方法

请求	备注
axios.get(url[, config])	⭐️
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])	⭐️
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

• config - 选项对象、例如查询参数、请求头…
• data - 请求体数据、最常见的是 json 格式数据
• get、head 请求无法携带请求体，这应当是浏览器的限制所致（xhr、fetch api 均有限制）
• options、delete 请求可以通过 config 中的 data 携带请求体

axios常见的 config 项有

名称	含义
baseURL	将自动加在 url 前面
headers	请求头，类型为简单对象
params	跟在 URL 后的请求参数，类型为简单对象或 URLSearchParams
data	请求体，类型有简单对象、FormData、URLSearchParams、File 等
withCredentials	跨域时是否携带 Cookie 等凭证，默认为 false
responseType	响应类型，默认为 json

设置请求头的信息

让请求头里面有一个Authorization 然后他携带的值是token

后端通过注解获取这个Authorization的值

请求携带参数

直接拼接

发送请求时携带查询参数 ?name=xxx&age=xxx
如果有特殊字符比如&这种的化需要进行编码处理

 const name = encodeURIComponent("特殊字符");

使用axios拼接

config里面的params关键字的作用就是拼接参数的

用请求体发数据

后端用@RequestBody注解获取请求体里面的数据

urlencoded格式

json格式直接写在data里面就行了

multipart格式也类似

自定义的 axios

名称	含义
baseURL	将自动加在 url 前面
headers	请求头，类型为简单对象
params	跟在 URL 后的请求参数，类型为简单对象或 URLSearchParams
data	请求体，类型有简单对象、FormData、URLSearchParams、File 等
withCredentials	跨域时是否携带 Cookie 等凭证，默认为 false
responseType	响应类型，默认为 json

create的配置项在上面

baseURL 起拼接的作用 post发的地址拼接之后是
http://localhost:8080/api/a6set

如果没有设置withCredentials为true的话它默认是false

下面的后端收到set请求之后会返回一个cookie
如果withCredentials是false的话浏览器就不会使用后端返回的cookie导致请求a6get的时候session不是a6set的session

后端如果不加这个true会导致后端认为这个cookie有跨域问题
加上这个true就是运行cookie跨域

withCredentials为false时

session不一样导致获取不到name

withCredentials为true时

cookie就会携带

常见的响应

• 200 表示响应成功
• 400 请求数据不正确 age=abc
• 401 身份验证没通过
• 403 没有权限
• 404 资源不存在
• 405 不支持请求方式 post
• 500 服务器内部错误

请求拦截器

_axios.interceptors.request.use(
  function(config) {
    // 比如在这里添加统一的 headers
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

响应拦截器

_axios.interceptors.response.use(
  function(response) {
    // 2xx 范围内走这里
    return response;
  },
  function(error) {
    // 超出 2xx, 比如 4xx, 5xx 走这里
    return Promise.reject(error);
  }
);

路由

在main里面设置路由

配置路由

src/router/example14.js，内容如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import ContainerView from '@/views/example14/ContainerView.vue'
import LoginView from '@/views/example14/LoginView.vue'
import NotFoundView from '@/views/example14/NotFoundView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    component: ContainerView
  },
  {
    path:'/login',
    component: LoginView
  },
  {
    path:'/404',
    component: NotFoundView
  }
]

const router = new VueRouter({
  routes
})

export default router

路径上面的@这个是绝对路径的写法@代表这个src
根组件是 Example14View.vue，内容为：

<template>
    <div class="all">
        <router-view></router-view>
    </div>
</template>

• 样式略
• 其中 <router-view> 起到占位作用，改变路径后，这个路径对应的视图组件就会占据 <router-view> 的位置，替换掉它之前的内容

动态导入

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    component: () => import('@/views/example14/ContainerView.vue')
  },
  {
    path:'/login',
    component: () => import('@/views/example14/LoginView.vue')
  },
  {
    path:'/404',
    component: () => import('@/views/example14/NotFoundView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

• 静态导入是将所有组件的 js 代码打包到一起，如果组件非常多，打包后的 js 文件会很大，影响页面加载速度
• 动态导入是将组件的 js 代码放入独立的文件，用到时才加载

嵌套路由

import Vue from 'vue'
import VueRouter from 'vue-router'
// import ContainerView from '@/views/example14/ContainerView.vue'
// import LoginView from '@/views/example14/LoginView.vue'
// import NotFoundView from '@/views/example14/NotFoundView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    component: () => import('@/views/example14/ContainerView.vue'),
    redirect: '/c1/p1',
    children: [
      {
        path:'c1/p1',
        component: () => import('@/views/example14/container/P1View.vue')
      },
      {
        path:'c1/p2',
        component: () => import('@/views/example14/container/P2View.vue')
      },
      {
        path:'c1/p3',
        component: () => import('@/views/example14/container/P3View.vue')
      },
      {
        path:'c1/p4',
        component: () => import('@/views/example14/container/P4View.vue')
      }
    ]
  },
  {
    path:'/login',
    component: () => import('@/views/example14/LoginView.vue')
  },
  {
    path:'/404',
    component: () => import('@/views/example14/NotFoundView.vue')
  },
  {
    path:'*',
    redirect: '/404'
  }
]
const router = new VueRouter({
  routes
})

export default router

嵌套路由就是在路由里面写一个children的数组 里面配置

    path:'地址名字',
    component: () => import('要跳转到的vue文件的地址')

其中

关于p1 p2 p3这三个子页面分别是



主页面是

这个实现的效果是

关于路由跳转可看下面

路由跳转

标签式

<el-aside width="200px">
    <router-link to="/c1/p1">P1</router-link>
    <router-link to="/c1/p2">P2</router-link>
    <router-link to="/c1/p3">P3</router-link>
</el-aside>

编程式

<el-header>
    <el-button type="primary" icon="el-icon-edit" 
               circle size="mini" @click="jump('/c1/p1')"></el-button>
    <el-button type="success" icon="el-icon-check" 
               circle size="mini" @click="jump('/c1/p2')"></el-button>
    <el-button type="warning" icon="el-icon-star-off" 
               circle size="mini" @click="jump('/c1/p3')"></el-button>
</el-header>

jump 方法

<script>
const options = {
    methods : {
        jump(url) {
            this.$router.push(url);
        }
    }
}
export default options;
</script>

• 其中 this.$router 是拿到路由对象
• push 方法根据 url 进行跳转

导航菜单

<el-menu router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-submenu index="/c1">
        <span slot="title">
            <i class="el-icon-platform-eleme"></i>
            菜单1
        </span>
        <el-menu-item index="/c1/p1">子项1</el-menu-item>
        <el-menu-item index="/c1/p2">子项2</el-menu-item>
        <el-menu-item index="/c1/p3">子项3</el-menu-item>
    </el-submenu>
    <el-menu-item index="/c2">
        <span slot="title">
            <i class="el-icon-phone"></i>
            菜单2
        </span>
    </el-menu-item>
    <el-menu-item index="/c3">
        <span slot="title">
            <i class="el-icon-star-on"></i>
            菜单3
        </span>
    </el-menu-item>
</el-menu>

• 图标和菜单项文字建议用 <span slot='title'></span> 包裹起来
• el-menu 标签上加上 router 属性，表示结合导航菜单与路由对象，此时，就可以利用菜单项的 index 属性来路由跳转

添加动态路由

export function addServerRoutes(array) {
  for (const { id, path, component } of array) {
    if (component !== null) {
      // 动态添加路由
      // 参数1：父路由名称
      // 参数2：路由信息对象
      router.addRoute('c', {
        path: path,
        name: id,
        component: () => import(`@/views/example15/container/${component}`)
      });
    }
  }
}

• js 这边只保留几个固定路由，如主页、404 和 login
• 以上方法执行时，将服务器返回的路由信息加入到名为 c 的父路由中去
• 这里要注意组件路径，前面 @/views 是必须在 js 这边完成拼接的，否则 import 函数会失效

重置路由

在用户注销时应当重置路由

export function resetRouter() {
  router.matcher = 
  new VueRouter({ routes }).matcher
}

重置路由相当于是吧最开始的路由给复制了一下

页面刷新

页面刷新后，会导致动态添加的路由失效，解决方法是将路由数据存入 sessionStorage

<script>
import axios from '@/util/myaxios'
import {resetRouter, addServerRoutes} from '@/router/example15'
const options = {
    data() {
        return {
            username: 'admin'
        }
    },
    methods: {
        async login() {       
            resetRouter(); // 重置路由     
            const resp = await axios.get(`/api/menu/${this.username}`)
            const array = resp.data.data;
            // localStorage     即使浏览器关闭，存储的数据仍在
            // sessionStorage   以标签页为单位，关闭标签页时，数据被清除
            sessionStorage.setItem('serverRoutes', JSON.stringify(array))
            addServerRoutes(array); // 动态添加路由
            this.$router.push('/');
        }
    }
}
export default options;
</script>

页面刷新，重新创建路由对象时，从 sessionStorage 里恢复路由数据

const router = new VueRouter({
  routes
})

// 从 sessionStorage 中恢复路由数据
const serverRoutes = sessionStorage.getItem('serverRoutes');
if(serverRoutes) {
  const array = JSON.parse(serverRoutes);
  addServerRoutes(array) // 动态添加路由
}