vue2.x中使用JS与路由守卫配置、vue2.x中使用TS与路由守卫的配置和vuex的配置以及TS在vue2.x中的使用说明

vue2.x

事件修饰符

<button @click.stop.self="handleDelete(item)">button>

在使用 $confirm 时，使用 await 方式时，需要添加 catch 回调，否则无法获取 $confirm 关闭和取消时的标识值，并且后续代码停止执行。如下：

const action = await this.$confirm('文件删除后无法恢复，是否删除？', '删除提示').catch(s => s)

// action === 'confirm' 确认删除
// action === 'cancel' 取消删除
// action === 'close' 关闭提示框

JS+Vue-router

在当前路由界面调用 this.$router.push 访问当前页面报错问题解决方法如下：

const originPush = Vue.prototype.push
Vue.prototype.push = function(data) {
    return originPush.call(data).catch(err => err)
}

TS+Vue

参考博客：https://juejin.cn/post/6876020863683002382

import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { Route, NavigationGuardNext } from 'vue-fouter'
import Header from '@/components/Header'
import User from '@/types/one'

@component({ // 相当于 components: { Header }
    components: {
        Header    
    }
})
export default class Home extends Vue {
    // 相当于 props: { msg: '' }
    @Prop private msg!: string;
    
    // 相当于 { props: { title: { type: string, default: '标题' }, required: false } }
    @Prop({ type: string, default: '标题' }) readonly title?:string
    
    // 相当于 { props: { author: { type: Object, default: { name: '-', age: '-' }, required: true } } }
    @Prop({ type: Object, default: () => ({ name: '-', age: '-' }) }) readonly author!: User
    
    // 相当于 data() { message: 'hello world!' }
    message: string = 'hello world!';
    
    // 相当于 computed: { messageInfo() { return this.msg + this.message } }
    get messageInfo() {
        return this.msg + this.message
    }
    // 相当于 watch: { '$route': { handler: (val, oldVal) { console.log('$router watch', val, oldVal) }, immediate: true } }
    @Watch('$route', { immediate: true }) changeRouter(val: Route, oldVal: Route) {
        console.log('$router watch', val, oldVal)    
    }
    // 相当于 computed: { headerRef: { cache: false, get() { return this.$refs.header as Header } } }
    @Ref('header') readonly headerRef!: Header
    
    created() {}
    // 相当于 methods: { handleSubmit() { console.log('handleSubmit') } }
    handleSubmit() {
        console.log('handleSubmit')
    }
}

TS+Vue-router

在当前路由界面调用 this.$router.push 访问当前页面报错问题解决方法如下：

const originPush = Vue.prototype.push
Vue.prototype.push = function (data: any) {
    try {
        return originPush.call(data)?.catch(err: any => err)    
    } catch (error: any) {
        return Promise.reject(error)    
    }
}

TS+vuex

// @/store/index.ts
import { Vuex } from 'vuex'
const store = new Vuex.Store<{}>({})
export default store

// @/store/modules/user.ts
import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators'
import store from '../index'

type MenuItem = {
  menuName: string,
  menuId: number,
  parentId: number,
  url: string,
  sysUrl: string
}

type UserState = {
  menu: MenuItem[]
}

const menu: MenuItem[] = [
  { menuId: 1, parentId: 0, url: '/home', sysUrl: '/home', menuName: '首页' }
]

@Module({ dynamic: true, store, name: 'user', namespaced: true })
class UserModule extends VuexModule implements UserState {
  menu: MenuItem[] = []

  @Mutation
  private _setMenu(data: MenuItem[]) {
    this.menu = data
  }

  @Action
  async login() {
    return new Promise((resolve, reject) => {
      resolve({ obj: { data: { menu: [] } } })
    })
  }
}

export default getModule(UserModule)

TS + Echarts

在 vue2.x + ts 中引入 echarts 时，json文件引入失败。解决方法是在 tsconfig.json 中添加 resolveJsonModule: true, 注意：这个属性要放在paths属性之前，否则无效。

import jiangsu from '@/assets/map/jiangsu.json'

{ "resolveJsonModule": true }

在 vue2.x + ts 中引入 echarts 时， 引入的 .json 文件无法识别类型，解决方法是使用 jiangsu as any 可以解决问题。

import jiangsu from '@/assets/map/jiangsu.json'
import * as echarts from 'echarts'
echarts.registerMap('jiangsu', jiangsu as any)