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!: Headercreated() {}// 相当于 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[] = []@Mutationprivate _setMenu(data: MenuItem[]) {this.menu = data}@Actionasync 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)