vue项目中遇到的那些事。

前言有好几天没更新文章了。这段实际忙着做了一个vue的项目,从19天前开始,到今天刚好20天,独立完成。做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术。技术栈:vue2 vuex vue-router webpack ES6/7 element-ui vue-baidu-map i18n vue-awesome-swiper做项目时总是有一些思考和踩过的坑,对以后有一定的帮助...

vue项目中遇到的那些事。

前言

  有好几天没更新文章了。这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成。

  做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术。

  技术栈:vue2vuexvue-routerwebpackES6/7element-uivue-baidu-mapi18nvue-awesome-swiper

  做项目时总是有一些思考和踩过的坑,对以后有一定的帮助,今天就来写写做vue项目遇到的那些事。

  假如你正准备做项目或正在做项目一定看看,说不定对你有所帮助。

正文

 照例放上一些项目中用到的权威的官网

    vue官方api:https://cn.vuejs.org/

    vue资源精选:http://vue.awesometiny.com/

    vueGitHub地址:https://github.com/vuejs/vue

    element-ui官方中文api:http://element-cn.eleme.io/#/zh-CN/component/dropdown

    vue-awesome-swiperGitHub地址:https://surmon-china.github.io/vue-awesome-swiper/

  

1.阅读vue的风格指南再开始你的项目(最重要)

  

2.vue项目中data可以视为一个函数

<script>export default {  data () { // 可以在这里写很多的前置数据操作 return {}  }}</script>

例如:

<script>export default {  data () { // 可以在这里写很多的前置数据操作
  // 不在首页时隐藏切换语言
  let showLanguageList
  if (
    this.$route.path === '/Home' ||
    this.$route.path === '/' ||
   ) {
    showLanguageList = true
   } else {
    showLanguageList = false
  }
 return {
   
showLanguageList: showLanguageList
  }  }}</script>

3.路由带参

路由带参:点击查看官网说明

  • 我们可以在路由切换时绑定参数

在App.vue文件中监听路由绑定参数

watch: { $route (to, from) {// 在路由上绑定语言和公司编号this.$router.replace({  path: this.$router.path,  query: { languageCode: '中文', companyCode: '阿里巴巴'  }}) }  }
  • 函数query传参可以和路由绑定id一起使用

路由绑定ID:

const User = {  template: '<div>User {{ $route.params.id }}</div>'}const router = new VueRouter({  routes: [ { path: '/user/:id', component: User }  ]})

效果:

  

4.解决整个项目的数据刷新问题

需求:在项目中经常会用到点击某个按钮或者更新某个参数时,整个项目的后台数据都从新请求一遍或者刷新整个页面。

  • 类似F5刷新

this.$router.go(0);location.reload() //这两种方式都相当于f5刷新,页面会有卡顿,白屏的情况,用户体验极差
  • 通过v-if的显示,消失,刷新数据

  适用于整个项目的数据刷新,当然也可以用于刷新部分页面

 页面刷新相对流畅,比较推荐的一种方法

 在App.vue中:

<template>  <div id="app"> <router-view v-if="isRouterAlive" />  </div></template><script>export default {  name: 'App',  provide () { return {reload: this.reload }  },  data () { return {isRouterAlive: true }  },  methods: { reload () {this.isRouterAlive = falsethis.$nextTick(function () {  this.isRouterAlive = true}) }  }}</script><style></style>

在子组件中,当我们需要刷新数据时:

<template>  <div @click="onSubmit_name"></div>
</template><script>export default {  data () { return {}  },  inject: ['reload'], //引入方法  methods: {
  onSubmit_name() {this.reload()} //需要刷新数据的时候调用reload方法
}</script><style></style>
  • 利用路由的replace方法

  这种方式是进入一个空白页,在空白页里面跳转回原来的页面,这种方式页面刷新相对流畅

// 需要刷新数据的页面,refresh () {  this.$router.replace({ path: '/refresh', query: {t: Date.now() //携带必要的路由参数 }  })}// refresh.vue页面中里有路由钩子,直接返回前一个页面<script>export default {  beforeRouteEnter(to, from, next) { next(vm => {vm.$router.replace(from.path) })  }}</script>

5.element-ui导航栏与路由

  • 激活导航跳转对应路由

在element-ui的导航中,官方让我们能和vue的router无缝对接,实现绑定路由,同样可以根据路由实现对应导航栏高亮。

router 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 boolean — false

请看图中标红的位置,添加router以后,每次激活导航时以 index 作为 path 进行路由跳转

<el-menu router :default-active="activeIndex" class="el-menu-vertical-demo hidden-sm-and-up" mode="vertical" :collapse="isCollapse" "height:62px;float:right;width:100%;border:0;z-index:100"background-color="#222" text-color="#fff" active-text-color="#e42828"><el-submenu index="1">  <template slot="title"> <i class="el-icon-menu"></i> <span slot="title">{{$t('home.home')}}</span>  </template>  <el-menu-item-group> <el-menu-item index="/Pages">{{$t('home.home')}}</el-menu-item> <el-menu-item index="/PagesAbout">{{$t('home.about'
源文地址:https://www.guoxiongfei.cn/cntech/9843.html
0