2020年08月_Misnice

原创 vue嵌套路由，二级路由使用介绍

vue-router 嵌套路由，二级子路由项目中如果都是一级路由，路由管理会有些乱。嵌套路由是路由中包含路由的意思，组件中可以有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套，在vue组件中使用<router-view>就可以了。1.嵌套路由的使用场景当项目中有选项卡时，切换选项卡按钮，页面中间部分的内容会变，但是选项卡按钮不会变；页面中间部分内容的变化就可以通过二级子路由实现，中间部分显示的内容就是二级子路由的内容

2020-08-14 23:35:23 5671 2

原创 Duplicate keys detected: ‘0‘. This may cause an update error

报错误原因一个template中有两个一样的v-for<div class="node1" v-for="(item, index) in list" :key="index"> <div>{{item.name}}</div></div><div class="node2" v-for="(item, index) in list" :key="'index"> <div>{{item.name}}&lt

2020-08-13 19:59:57 384

原创 vue路由守卫

在路由配置文件中，给需要守卫的path后面加上meta在路由配置文件中，给需要守卫的path后面加上meta在main.js里面加上//路由守卫router.beforeEach((to, from, next) => { console.log(to,from,next); if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if(localStorage.token){ //判断本地是否存在token next();

2020-08-13 16:54:58 228

原创 vue-cli3.0搭建项目流程

第一步：安装脚手架1. 全局安装脚手架 npm install -g @vue/cli2. vue -V:查看版本号。第二步：在终端输入命令创建项目1. 输入 vue create objectName 项目的名字需要小写。2.default (babel, eslint) 默认安装> Manually select features 手动选择安装*****3.? Please pick a preset: Manually select fea...

2020-08-11 09:43:24 331

原创 vue插槽作用域

<body><div id = "myApp">  <child> <div slot="one" slot-scope="item"> {{item.user}} <p v-for="num in item.data">{{num}}</p> {{item}} &

2020-08-10 17:49:23 265

原创 vue中v-slot详解，具名插槽和作用域插槽

1、具名插槽具名插槽通常用作在指定的位置输出我们的子元素//组件调用时<Child> <template v-slot:footer> //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。 <div>子组件测试文字</div> </template></Child>//书写组件时<template> <div>

2020-08-10 17:39:49 1822

转载解决小程序页面路径最多只能十层限制

小程序文档里跳转路径的方法都有介绍，这里就不细说了！讲一下业务背景吧！随着项目越来越大，页面的跳转也越来越多，使用navigateTo方法添加的页面栈也越来越多了，不知不觉可能就到了十层了再用navigateTo去跳转就跳不动了，这个时候需要redirectTo删除当前页面栈来跳转或者用reLaunch删除所有页面栈来跳转用那就要看业务场景了。可是什么时候到了十层了呢？这个时候关键的api getCurrentPages()来了！它返回的是一个数组，那么就可以获取它的length来做判断了！// r

2020-08-10 15:45:11 3015

原创如何将项目强制推到github上

1.先在github上面创建一个项目地址2.其次进入到本地项目的目录文件下面执行A、 git init：初始化本地仓库B、git add . 添加全部已经修改的文件，准备commit 提交该命令效果等同于 git add -AC、git commit -m ‘提交说明’ 将修改后的文件提交到本地仓库，如：git commit -m ‘项目创建’D、连接到远程仓库，并将代码同步到远程仓库git remote add origin 远程仓库地址E、git pull origin maste

2020-08-10 11:53:17 1195 1

原创 js遍历查找数组中最大值与最小值的方法

直接上代码<script> // 查找数组中最小值function mathMin(arrs){ var min = arrs[0]; for(var i = 1, ilen = arrs.length; i < ilen; i+=1) { if(arrs[i] < min) { min = arrs[i]; } } return min;}// 代码测试var rets = [2,4,5,6,7,0,9,10,15,1];

2020-08-07 16:47:01 4502

原创 vue中用videojs实现直播功能

直接上代码<template> <div class="strategic-cooperation"> <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-progress-holder" ref="viodeRef" poster="" style="w

2020-08-06 17:28:11 3476

原创 vue实现下载功能，处理后端返回的二进制文件流

const content = res.data; //后端返回的数据 let url = window.URL.createObjectURL(content) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('id', 'dow...

2020-08-06 10:13:53 1601

原创 js有哪些数据类型

基本数据类型：Number（数字） String（字符串） Boolean：布尔类型（true，false）特殊数据类型：Null（空） undefined（未定义）复合数据类型：Object（对象）

2020-08-05 14:13:25 363

原创 vue组件传值

一、父组件向子组件传值，通过props传值父组件中在子组件的标签中写上要传的值<template> <div id="app">  <Child v-bind:val1="value1" v-bind:val2="value2"></Child> </div></template><script> import

2020-08-05 10:55:11 210

Misnice的博客