文章目录

路由
- 路由组件出口
- 路由元信息
- 路由重定向
- 路由传参
- - 收集表单数据
  - 传递params参数
  - 传递params参数 + query参数
  - 尝试接收参数
  - 模板传参
  - 对象传参
  - 路由组件单独传输query参数其一
- 多次传参search页面时异常
- - 重写push和replace
  - 调试
从api获取数据，渲染到页面
- axios配置
- - 安装axios
  - axios二次封装
  - API进行统一管理
  - 跨域问题
  - - 解决
Vuex
- 安装Vuex
- 配置store
- - 入口文件引入并注册store
- Vuex案例演示（大仓库统一管理，不推荐使用）
- - 效果展示

路由

路由组件出口

实现最基本的路由跳转

    <router-view></router-view>

路由元信息

meta:{}

     {path: '/home',component: Home,meta: { show: true },}

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

为真显示，为假则不显示

路由重定向

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

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

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

路由传参

收集表单数据

v-model双向绑定收集

传递params参数

methods: {//搜索按钮的回调goSearch() {//路由的跳转,采用的是编程式导航.//路由传递参数//第一种传递query参数this.$router.push('/search/' + this.keyword)
}

正常接收param参数

传递params参数 + query参数

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

尝试接收参数

     <h1>params参数{{$route.params.keyword}}</h1><h1>query参数{{$route.query.k}}</h1>

模板传参

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

对象传参

      this.$router.push({name: 'search',params: { keyword: this.keyword },query: { k: this.keyword.toUpperCase() },})

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

使用props

     {path: '/search/:keyword?',component: Search,meta: { show: true },name: 'search',props: ($route) => {return { keyword: $route.params.keyword, k: $route.query.k }},},

<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>

      this.$router.push({name: 'search',params: { keyword: this.keyword },query: { k: this.keyword.toUpperCase() },})

多次传参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,() => {},() => {})}
}

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

调试

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

axios配置

安装axios

npm install --save axios

axios二次封装

//对于axios进行二次封装
import axios from 'axios'//1：利用axios对象的方法create，去创建一个axios实例
//2：request就是axios，只不过稍微配置一下
const requests = axios.create({//配置对象//基础路径，发请求的时候，路径当中会出现apibaseURL: '/api',//代表请求超时的时间5Stimeout: 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

API进行统一管理

//当前这个模块：API进行统一管理
import requests from './request';//三级联动接口
///api/product/getBaseCategoryList  get 无参数
//发请求:axios发请求返回结果是Promise对象export const reqCategoryList = ()=>{return requests({url:'/product/getBaseCategoryList',method:'get'})}

跨域问题

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

解决

//代理跨域proxy: {'/api': {target: 'http://39.98.123.211:8510/',// pathRewrite: { '^/api': '' },changeOrigin: true,},},

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
})

入口文件引入并注册store

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

效果展示

尚品汇 - 项目个人笔记总汇（更新中...）相关推荐

尚品汇项目笔记（持续更新中）
项目网络教学视频链接:尚硅谷VUE项目实战,前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili 目录一. 使用vue-cli脚手架去初始化项目二.项目的其他配置三.项目路由分析四.创建 ...
尚硅谷 VUE 尚品汇项目实战问题解决方式整理
最近在自学大型vue项目,选中了尚硅谷的尚品汇,之前也学习过黑马程序员的一个电商后台管理项目,因为项目打包优化时候出了Bug,就闲置了,但是代码是一行一行敲完啦,也放到了码云上!学完这个尚品汇准备下一 ...
尚硅谷 VUE 尚品汇项目实战问题解决方式整理(Vue3 版)
教学视频:https://www.bilibili.com/video/BV1Vf4y1T7bw 不回要资料的评论,资料在视频底下评论有些仓库里面有. 试图自行解决问题也是程序员必备技能之一,多做尝试 ...
尚硅谷-尚品汇项目开发总结（第十五天）
27:图片懒加载:vue-lazyload插件实现 27.1 为什么需要图片懒加载? 在图片很多的网站中,如果所有图片全部一次性加载完毕,可能会增加服务器压力.导致页面卡顿.影响用户体验. 为了解决这 ...
尚硅谷--尚品汇项目笔记
文章目录项目核心一.项目准备二.脚手架目录作用三.项目的其他配置四.路由的分析 1.路由组件的搭建 2.配置路由 3.路由组件和非路由组件区别: 4.路由的跳转 5.路由传参 6.路由传递参 ...
尚品汇项目难点及解决
v-router重写push.replace方法问题描述:当页面再次进入同一个路由地址时,控制台报错解决方法:修改vue-router的配置文件,也就是router/index.js文件 //重写 ...
尚硅谷-尚品汇项目开发总结（第十六天，电商项目完）
30:项目打包上线 30.1:运行npm run build,生成dist文件夹 30.2:.map文件:在项目打包后,代码都是经过加密的,如果运行时报错,输出的错误信息无法准确定位是哪里的代码出错, ...
React尚硅谷张天禹笔记（更新中......）
简介英文官网: https://reactjs.org/ 中文官网: https://react.docschina.org/ 介绍描述用于动态构建用户界面的 JavaScript 库(只关注于视 ...
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
文章目录最好使用视频上的账号密码,13700000000 密:111111 最新服务端接口地址:http://gmall-h5-api.atguigu.cn 脚手架使用 1.创建项目 2.脚手架默认 ...

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

文章目录

路由

路由组件出口

路由元信息

路由重定向

路由传参

收集表单数据

传递params参数

传递params参数 + query参数

尝试接收参数

模板传参

对象传参

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

多次传参search页面时异常

重写push和replace

调试

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

axios配置

安装axios

axios二次封装

API进行统一管理

跨域问题

解决

Vuex

安装Vuex

配置store

入口文件引入并注册store

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

效果展示

尚品汇 - 项目个人笔记总汇（更新中...）相关推荐

最新文章

热门文章