Vue踩坑

目录

1、引入组件：

2、路由跳转：

3、调用接口：

4、设置默认路由：

---

1、引入组件：

组件：AbcDef
<script>
	export default {
		name: ‘组件名’，
}
</script>
引入：
<template>
	<abc-def></abc-def>
</template>

<script>
import 组件名 from ‘组件路径/AbcDef’
export default {
		name: ‘’，
		components: {AbcDef}
}
</script>

2、路由跳转：

同一路由，key值不同，随key值改变刷新

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import 组件名 from '../pages/组件名'

const originalPush = Router.prototype.push

Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: home组件
    }, { //需随key值改变更新的页面
      path: '/key',
      name: 'key',
      meta: {
        keepActive: true
      },
      component: Key
    }
  ]
})

App.vue

<template>
  <div id="app">
      <router-view v-if="isRouterActive"></router-view> //页面更新
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data: function () {
    return {
      isRouterActive: true
    }
  },
  methods: {
    reload () {
      this.isRouterActive = false
      this.$nextTick(() => {
        this.isRouterActive = true
      })
    }
  },
  provide () {
    return {
      reload: this.reload
    }
  }
}
</script>

pages/Key.vue //需要更新的页面

<template>
  <div class="search-page">
    <page-header></page-header>
    //keep-alive包裹需更新的组件，组件内生命周期钩子函数actived才会执行
    <keep-alive>
      <page-content></page-content>
    </keep-alive>
    <page-footer></page-footer>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader'
import PageContent from '../components/PageContent'
import PageFooter from '../components/PageFooter'
export default {
  name: 'Key',
  components: {PageHeader, PageContent, PageFooter},
  //在当前路由改变，但是该组件被复用时调用（不记得有没有用）
  beforeRouteUpdate (to, from, next) {
    console.log(to, from, next)
    if (to.query.input !== from.query.input) {
      next()
    }
  }
}
</script>

components/KeyContent.vue  //需更新的组件

<template>
  <div class="content">
  </div>
</template>

<script>
export default {
  name: 'KeyContent',
  activated () {
    this.pageList()
    console.log('actived!')
  },
  inject: ['reload'],    //注入reload
  watch: {               //监听路由
    '$route' (to, from) {
      this.input = to.query.input
      this.reload()
    }
  }
}
</script>

3、调用接口：

axios：get、put请求

<script>
import axios from 'src/extend/Server'
import config from 'src/config'

let configUrl = `${config.homeHost}v1`
let configUrl2 = `${config.homeHost}hook`

export default {
  name: 'NavDown',
  data: function () {
    return {
      proClassify: [],
      navigationList: []
    }
  },
  mounted () {
    this.getNavigationList()
    this.getAllProClassify()
  },
  methods: {
    getAllProClassify () {
      let that = this
      let url = `${configUrl}/classify/tool-list`
      axios
        .get(url)
        .then(function (res) {
          that.proClassify = res.data.data.filter(
            x => {
              return x
            }
          )
        })
        .catch(function (error) {
          that.$message({
            type: 'danger',
            message: '获取工具列表失败！'
          })
        })
    },
    getNavigationList () {
      let that = this
      let url = `${configUrl}/navi-menu`
      axios
        .get(url)
        .then(function (res) {
          that.navigationList = res.data.data.filter(
            x => {
              return x
            }
          )
        })
        .catch(function (error) {
          that.$message({
            type: 'danger',
            message: '获取导航列表失败！'
          })
        })
    },
    ViewTools (id) {
      let that = this
      let url = `${configUrl2}/toolView`
      const user = this.$store.state.userInfo
      axios
        .put(url, { 'toolId': id, 'workNo': user.id })
        .then(response => (console.log(response)))
        .catch(function (error) {
          that.$message({
            type: 'danger',
            message: '获取导航工具访问量失败！'
          })
        })
    }
  }
}
</script>

4、设置默认路由：

router/index.js

routes: [
    {
      path: '/',
      name: 'home',
      redirect: '/qahomeApp'
    },
    {
      path: '/qahomeApp',
      name: 'qahomeApp',
      component: Qahome
    }]

5、首字母大写

<p>{{ getFirstUpper(v.name) }}</p>

<script>
export default {
    methods: {
        getFirstUpper (str) {
          return str.charAt(0).toUpperCase() + str.slice(1)
        }
    }
}
</script>

代码若是有错误或可以改进，欢迎指正！持续更新……