【VUE学习笔记】路由之vuex动态组件创建流程及知识点

DayHeart

已于 2022-04-08 17:53:41 修改

阅读量2.6k

点赞数 2

分类专栏： VUE学习笔记文章标签： vue 前端

于 2022-04-04 17:18:58 首次发布

本文链接：https://blog.youkuaiyun.com/DayHeart/article/details/123956726

版权

VUE学习笔记专栏收录该内容

9 篇文章

订阅专栏

1.制作静态组件

略

2.1在router的routes.js引入路由组件

//此处以Detail组件举例
import Detail from "@/pages/Detail/";

然后在该文件中对外暴露VueRouter类的实例

//对外暴露路由VueRouter类的实例
export default
  //配置路由的规则 [
    {
      path: "/detail/skuid",
      component: Detail,
      //路由元信息只能叫meta，此处配置为默认显示底部组件
      meta: { isShowFooter: true },
    },
    //配置默认重定向
	  {
	    path: "*",
	    redirect: "/home",
	  },
    ]

此时你已经可以在地址栏中手动输入查看静态组件啦
无法跳转的情况：更改router后需要重启npm服务，重启下就好了

2.2.在在router的index.js重写push和replace方法

import Vue from "vue";
import VueRouter from "vue-router";
//引入路由配置
import routes from "./routes";
//使用插件
Vue.use(VueRouter);

//把VueRouter原型对象的push,replace方法保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;

//重写push/replace
//第一个参数:告诉原来push方法，你往哪里跳转（传递哪些参数)
//calll || apply区别
//相同点，都可以调用函数一次，都可以篡改函数的上下文一次
//不同点: call与apply传递参数: call传递参数用逗号隔开，apply方法执行，传递数组
VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
    originPush.call(this, location, resolve, reject);
  } else {
    originPush.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
};
VueRouter.prototype.replacce = function (location, resolve, reject) {
  if (resolve && reject) {
    originReplace.call(this, location, resolve, reject);
  } else {
    originReplace.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
};

//对外暴露路由VueRouter类的实例
export default new VueRouter({
  //配置路由的规则, 属性和属性值相同时使用es6语法的简写形式，完整为routes:routes
  routes,
});

3.【滚动行为】让组件在跳转后显示页面回到顶部

//对外暴露路由VueRouter类的实例
export default new VueRouter({
  //配置路由的规则
  routes,
  //配置滚动行为
  scrollBehavior(to, from, savedPosition) {
    //如果savedPosition存在，就使用savedPosition
    //如果不存在，就使用默认的
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  },
});

4.在相应组件的结构中配置router-link标签

<router-link :to="`/detail/${skuid}`">
<img :src="xxxxx" />
</router-link>

此时已经实现点击跳转，并且传递了skuid参数（params类型）

5.在api文件夹中的index.js配置接口信息

//例：获取产品详情信息的接口URL: /api/item/{ skuId }请求方式: get
export const reqGetProductDetail = (skuId) => requests.get(`/item/${skuId}`);

6.1.在store文件夹新建相应js文件，配置VUEX仓库

也可以在6.3再配置

const state = {};
const mutations = {};
const actions = {};
const getters = {};
export default {
  state,
  mutations,
  actions,
  getters,
};

6.2.在store文件夹的index.js文件中将上述模块合成大仓库

import Vue from "vue";
import Vuex from "vuex";
//需要使用vuex
Vue.use(Vuex);
//引入小仓库
import detail from "./detail";

//对外暴露store类的一个实例
export default new Vuex.Store({
  //实现模块化
  modules: {
    detail,
  },
});

6.3在仓库模块中配置vuex行为（捞数据)

//第一步引入接口
import { reqGetProductDetail } from "@/api";
const state = {
第四步写state
  //此处的默认类型要看接口返回的数据类型
  detailInfo: {},
};
const mutations = {
第三步写mutations，
  GETDETAILINFO(state, data) {
    state.detailInfo = data;
  },
};
const actions = {
  //第二步写action，
  async getProductDetail({ commit }, skuId) {
    const result = await reqGetProductDetail(skuId);
    if (result.code == 200) {
      commit("GETDETAILINFO", result.data);
    }
  },
};
const getters = {};
export default {
  state,
  mutations,
  actions,
  getters,
};

此时在vue开发工具中看不到数据，因为还没有在组件中派发action

7.在组件的mounted函数中派发action

挂载完毕就获取数据

mounted() {
    //派发action，记得传递id参数
    console.log(this.$route.params.skuid);
    this.$store.dispatch("getProductDetail", this.$route.params.skuid);
  },

8.根据需要在仓库中简化数据

如果没有数据，则返回值为undefined，调用时Vue会在控制台警告
则使用||语法如果未定义就返回空数组或对象，就能解决警告
还有警告的话就重启服务，刷新页面

const getters = {
  //简化数据
  categoryView(state) {
    //注意简化数据前，有可能没有数据，所以要判断返回空数组或空对象
    return state.detailInfo.categoryView || [];
  },
};

8.1 在组件中使用计算属性获取仓库的简化数据

添加如下代码

import { mapGetters } from "vuex";	
//注意计算属性写的位置
computed: {
		//以数组格式书写参数
	...mapGetters(["categoryView", "skuInfo"]),
},

1.hash和history的区别

hash	history
实现方式： hashchange	实现方式：监听popState，pushState，replaceState
地址带#，不利于APP推广	地址不带/#/
在访问二级页面的时候做刷新操作，可以加载到hash值对应页面	在访问二级页面的时候做刷新操作，会出现404错误，就需要和后端人配合让他配置一下apache或是nginx的url重定向
支持低版本浏览器和IE浏览器	HTML5新推出的API
路由的哈希模式其实是利用了window可以监听onhashchange事件，也就是说你的url中的哈希值（#后面的值）如果有变化，前端是可以做到监听并做一些响应（搞点事情），这么一来，即使前端并没有发起http请求他也能够找到对应页面的代码块进行按需加载。	可以将url替换并且不刷新页面，好比挂羊头卖狗肉，http并没有去请求服务器该路径下的资源，一旦刷新就会暴露这个实际不存在的“羊头”，显示404。
build之后本地 index.html 打开正常	build之后本地 index.html 打开是无效的。