2019-07-24发表2021-12-05更新web前端 / Vue3 分钟读完 (大约384个字)

Vue里面相同页面不同URL的刷新解决方案

随着项目的收尾，使用Vue也有大概两个月时间了，在这期间也才遇到过了不少的问题，今天就来说下 Vue 中URL不同但是页面相同的解决办法。

现象

假设有两个URL，都对应的是一个相同的 Vue 页面，URL分别是 view/account/1 和 edit/account/1，此时如果由 view/account/1 跳转至 edit/account/1，你会发现页面是不会刷新的，从而直接影响了整体的功能。

于是去网上寻找解决方案，在一个 github 的 issue 里面，看到也有人反映过这个问题，不过作者的回复是采用

reload 方式进行强制刷新，也就是类似于 F5 那样，页面首先会白一下，然后就再出现元素。这样虽然可以实现页面上元素的一些加载，但是同时它的弊端也体现出来了，就是对用户极度的不友好，所以最后我们才用了一种Reload的方式来进行刷新的。

2019-06-27发表2021-12-05更新web前端 / Vue2 分钟读完 (大约346个字)

vue里面冒号和非冒号区别

vue里面冒号和非冒号的却别

今天在使用Vue的时候，突然发现了一个问题，就是在后端传过来的值因为是一个boolean类型的，但是前端又需要进行展示，由于我们使用的是ElementUI的话，于是参照官网上就是这样写的：

<el-select v-model="option_boolean">
        <el-option label="1" value="true"></el-option>
        <el-option label="2" value="false"></el-option>
</el-select>

但是此时页面上展示并非是 1 和 2 ，而是 true 和 false。如下：

2019-05-30发表2021-12-05更新web前端 / Vue6 分钟读完 (大约836个字)

ElementUI使用rules遇到的一些问题

这些天一直在踩Vue的坑…今天遇到的一个问题是在一个父组件中，将某些数据通过props传递给子组件，同时在子组件里面也有相应的一些rules规则，但是在实际的开发中，却发现子组件的rules并未生效…反而一直提示对应的 message，后来才发现是跟 ElementUI 的prop有关。

首先看一段代码:

<template>
<div>
  <p>该Demo是为了测试Vue中rule和prop的不同</p>
  <el-form :model="vehicles">
    <el-form-item label="公共汽车车轮个数" prop="bus.wheel" :rules="{required: true,message: '请输入公共汽车车轮个数'}">
      <el-input v-model="vehicles.bus.wheel" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="公共汽车司机驾照" prop="bus.driver.license" :rules="{validator: licenseCheck ,trigger:'blur'}">
      <el-input v-model="vehicles.bus.driver.license" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="公共汽车车轮个数" prop="bus.driver.years">
      <el-input v-model="vehicles.bus.driver.years" placeholder="请输入"></el-input>
    </el-form-item>
     <car :car="vehicles.car"></car>
  </el-form>
</div>
</template>
<script>
import Car from './Car';

export default {
  components: {
    Car
  },
  data () {
    return {
      vehicles: {
        bus: {
          wheel: null,
          driver: {
            license: null,
            years: null
          }
        },
        car: {
          wheel: null,
          driver: {
            license: null,
            years: null
          }
        },
        train: {
          wheel: null,
          driver: {
            license: null,
            years: null
          }
        }
      },
      person: {
        child: {
          year: null
        }
      }
    };
  },
  methods: {
    licenseCheck (rule, value, callback) {
      let m = this.car;
      console.log(m);
      debugger;
      if (value != null) {
        if (value != 'A') {
          callback(new Error('必须A照'));
        } else {
          callback();
        }
      }
    },
    init () {
      console.log(this.car);
    }
  }
};
</script>
<style>

</style>

此时在这个组件中，一切都是正常的，但是一个完整的项目里面，是不可能将所有的元素都堆积在一个页面中，那样的话以后的维护就会非常的麻烦。所以此时就需要一个子组件，然后将父组件中一些数据传递至子组件。
代码如下:

<template>
  <div>
      <p>小汽车子组件</p>
    <el-form-item label="小汽车车轮个数" prop="wheel" :rules="{required: true,message: '请输入公共汽车车轮个数'}">
      <el-input v-model="car.wheel" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="小汽车司机驾照" prop="driver.license" :rules="{validator: licenseCheck ,trigger:'blur'}">
      <el-input v-model="car.driver.license" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="小汽车车轮个数" prop="driver.years">
      <el-input v-model="car.driver.years" placeholder="请输入"></el-input>
    </el-form-item>
  </div>
</template>
<script>
export default {
  props: {
    car: {
      type: Object,
      default: function () {
        return {};
      }
    }
  },
  methods: {
    licenseCheck (rule, value, callback) {
      let m = this.car;
      console.log(m);
      debugger;
      if (value != null) {
        if (value <= 'D') {
          callback(new Error('必须C照以上'));
        } else {
          callback();
        }
      }
    },
    init () {
      console.log(this.car);
    }
  },
  mounted () {
    this.init();
  }
};
</script>
<style>

</style>

2019-05-27发表2021-12-05更新web前端 / Vue5 分钟读完 (大约765个字)

在Vue中使用filters来进行字典值的转换

在Vue里面，经常会遇到一些字典值的转换，而这些字典值由于和后端进行了约定的，一般不会轻易的改变，所以在前后端开发的项目中，这种字典值最好的做法是前端独立的保存一份，自己在前端自行进行处理。

我们的做法是使用Vuex的store配合filters来进行前端的字典值转化，首先是在store里面将字典值进行固定，然后通过filters在页面中进行一个转换。

使用Store

在Vue里面使用store首先需要安装vuex，安装完毕之后就可以直接在main.js里面直接引用了，但是为了统一管理还是决定新建一个store文件夹，然后将store相关的文件全部统一存放，新建完毕之后项目结构如下：

---App.vue
---main.js
---store
-----index.js

2019-05-20发表2021-12-05更新web前端 / Vue2 分钟读完 (大约366个字)

Vue中nextTick的使用

这段时间一直在负责一个前后端项目，前端是Vue+ElemeUI，由于自己之前只是会简单的使用 Vue 的一些初级命令，自然只能慢慢的踩坑，然后再出坑….。例如数组无法触发Vue的视图更新

刚开始在使用 Vue 的时候，一直都是在 created 方法里面获取后端数据进行渲染，这样用起来倒也没什么问题，只不过今天突然看到了 Vue 的nextTick 方法，感觉比之前在created里面请求后端更加高级。所以顺便研究了一波。

使用场景

nextTick常用于数据更新后，但是dom元素还未完成刷新，如何理解呢? 在 Vue 里面，更新 DOM 元素是异步的，也就是说当我们修改了数据之后，DOM元素并不会立即被刷新。参考深入响应式原理

如下Demo

2018-10-31发表2021-12-05更新web前端 / Vue1 分钟读完 (大约185个字)

Vue中使用router遇到无法跳转的问题

今天在配置Vue的路由的时候，在router的index.js中配置了如下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/components/home/Home'
import Tree from '@/pages/components/tree/Tree'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/tree',
      name: 'Tree',
      component: Tree
    }
  ]
})

但是却在启动项目的时候，输入URL:localhost:8080/tree无法实现跳转，后来发现是在App.vue中没有设置<router-view>,最后加上去即可。

例如在App.vue中配置了一个<router-view>，输入URL:localhost:8080/tree就会跳转到了Tree.vue。
那假设在Tree.vue中再配置配置一个<router-view>，这时候就会匹配的是localhost:8080/tree/XXX,当然也可以直接用<router-link>跳转到指定的组件中

Vue里面相同页面不同URL的刷新解决方案

现象

vue里面冒号和非冒号区别

vue里面冒号和非冒号的却别

ElementUI使用rules遇到的一些问题

在Vue中使用filters来进行字典值的转换

使用Store

Vue中nextTick的使用

使用场景

Vue中使用router遇到无法跳转的问题

分类

归档

订阅更新

follow.it

最新文章

标签