尚品汇 - 项目个人笔记总汇（更新中...）_尚品汇项目笔记

路由

路由组件出口

• 实现最基本的路由跳转

    <router-view></router-view>
1

路由元信息

meta:{}

		{
			path: '/home',
			component: Home,
			meta: { show: true },
		}
1
2
3
4
5

给一个参数“show”，返回真假，让v-show来接收这个boolean值，判断是否显示当前页面中的组件

为真显示，为假则不显示

路由重定向

• 把访问项目主页设置为某一个其他页面

		//重定向，在项目跑起来的时候，访问/，立马让他定向到首页
		{
			path: '*',
			redirect: '/home',
		},
1
2
3
4
5

下面这个页面，按下回车后，会变成第二个页面的路径

路由传参

收集表单数据

v-model双向绑定收集

传递params参数

methods: {
    //搜索按钮的回调
    goSearch() {
      //路由的跳转,采用的是编程式导航.
      //路由传递参数

      //第一种传递query参数
      this.$router.push('/search/' + this.keyword)
}
1
2
3
4
5
6
7
8
9

正常接收param参数

传递params参数 + query参数

      this.$router.push(
        '/search/' + this.keyword + '?k=' + this.keyword.toUpperCase()
      )
1
2
3

尝试接收参数

     

    <h1>params参数{{$route.params.keyword}}</h1>
    <h1>query参数{{$route.query.k}}</h1>
1
2
3
4

模板传参

      this.$router.push(
        `/search/${this.keyword}?k=${this.keyword.toUpperCase()}`
      )
1
2
3

对象传参

      this.$router.push({
        name: 'search',
        params: { keyword: this.keyword },
        query: { k: this.keyword.toUpperCase() },
      })
1
2
3
4
5

路由组件单独传输query参数其一

• 使用props

		{
			path: '/search/:keyword?',
			component: Search,
			meta: { show: true },
			name: 'search',
			props: ($route) => {
				return { keyword: $route.params.keyword, k: $route.query.k }
			},
		},
1
2
3
4
5
6
7
8
9

<template>
  <div>我是搜索页
    <h1>params参数{{$route.params.keyword}}=============={{keyword}}</h1>

    <h1>query参数{{$route.query.k}} =============={{k}}</h1>
  </div>
</template>

<script>
export default {
  name: '',
  props: ['keyword', 'k'],
}
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

      this.$router.push({
        name: 'search',
        params: { keyword: this.keyword },
        query: { k: this.keyword.toUpperCase() },
      })
1
2
3
4
5

多次传参search页面时异常

重写push和replace

let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace

//重写push|replace
VueRouter.prototype.push = function (location, resolve, reject) {
	if (resolve && reject) {
		originPush.call(this, location, resolve, reject)
	} else {
		originPush.call(
			this.addRoute,
			location,
			() => {},
			() => {}
		)
	}
}

VueRouter.prototype.replace = function (location, resolve, reject) {
	if (resolve && reject) {
		originReplace.call(this, location, resolve, reject)
	} else {
		originReplace.call(
			this.addRoute,
			location,
			() => {},
			() => {}
		)
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

      let result = this.$router.push(
        { name: 'search', params: { keyword: this.keyword || undefined } },
        () => {},
        () => {}
      )
      console.log(result)
1
2
3
4
5
6

调试

从api获取数据，渲染到页面

axios配置

安装axios

npm install --save axios
1

axios二次封装

//对于axios进行二次封装
import axios from 'axios'

//1：利用axios对象的方法create，去创建一个axios实例
//2：request就是axios，只不过稍微配置一下
const requests = axios.create({
	//配置对象
	//基础路径，发请求的时候，路径当中会出现api
	baseURL: '/api',
	//代表请求超时的时间5S
	timeout: 5000,
})

//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情

requests.interceptors.request.use((config) => {
	//config：配置对象，对象里面有一个属性很重要，headers请求头
	return config
})

//响应拦截器
requests.interceptors.response.use((res) => {
        //成功的回调函数：服务器相应数据回来以后，响应拦截器可以检测到，可以做一些事情
        return res.data;
    },(error) => {
        //响应失败的回调函数
        return Promise.reject(new Error('faile'));
    });

//对外暴露
export default axios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

API进行统一管理

//当前这个模块：API进行统一管理
import requests from './request';

//三级联动接口
///api/product/getBaseCategoryList  get 无参数
//发请求:axios发请求返回结果是Promise对象

export const reqCategoryList = ()=>{return requests({url:'/product/getBaseCategoryList',method:'get'})}

1
2
3
4
5
6
7
8
9

跨域问题

• 什么是跨域：协议、域名、端口号不同请求，称之为跨域
  

解决

		//代理跨域
		proxy: {
			'/api': {
				target: 'http://39.98.123.211:8510/',
				// pathRewrite: { '^/api': '' },
				changeOrigin: true,
			},
		},
1
2
3
4
5
6
7
8
9

Vuex

安装Vuex

Vue - 正确安装Vuex

配置store

import Vue from 'vue';
import Vuex from 'vuex';

//需要使用插件一次
Vue.use(Vuex);

//state:仓库存储数据的地方
const state = {};
//mutations:修改state的唯一手段
const mutations = {};
//action:处理action，可以书写自己的业务逻辑，也可以处理异步
const actions = {};
//getters:理解为计算属性，用于简化仓库数据,让组件获取仓库的数据更加方便
const getters = {};

//对外暴露Store类的一个实例
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

入口文件引入并注册store

Vuex案例演示（大仓库统一管理，不推荐使用）

效果展示