文章目录
路由
路由组件出口
- 实现最基本的路由跳转
<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({
//配置对象
//基础路径,发请求的时候,路径当中会出现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
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
配置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案例演示(大仓库统一管理,不推荐使用)