vue路由

# 关闭当前tag 跳转到其他路由

this.$store.dispatch('tagsView/delVisitedView', this.$route)

// 跳转到指定路由

this.$router.replace({ path: '/dt/dt_template_config', query: { uuid: this.$route.query.uuid }})

// 接受参数

let uuid = this.$route.query.uuid;

# 显示服务器端的图片或者附件

showImg(path) {

    return process.env.VUE_APP_BASE_API + '/files' + path

}

# 每次切换页面都刷新最新数据

activated() {

    this.getDate();

}

# 获取时间

myDate.getYear();        //获取当前年份(2位)

myDate.getFullYear();    //获取完整的年份(4位,1970-????)

myDate.getMonth();       //获取当前月份(0-11,0代表1月)

myDate.getDate();        //获取当前日(1-31)

myDate.getDay();         //获取当前星期X(0-6,0代表星期天)

myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)

myDate.getHours();       //获取当前小时数(0-23)

myDate.getMinutes();     //获取当前分钟数(0-59)

myDate.getSeconds();     //获取当前秒数(0-59)

myDate.getMilliseconds();    //获取当前毫秒数(0-999)

myDate.toLocaleDateString();     //获取当前日期

var mytime=myDate.toLocaleTimeString();     //获取当前时间

myDate.toLocaleString( );        //获取日期与时间

 

 

# 数组常用操作

let array = [1, 3]

array.push(4) // 末尾插入数据

console.info(array) // 输出 [1 3 4]

array.unshift(0) // 前方插入数据

console.info(array) // 输出 [0 1 3 4]

array.splice(2, 0, 2) // 插入数字2

console.info(array) // 输出 [0 1 2 3 4]

array.splice(2, 1) // 从索引第3个删除 1个数组

console.info(array) // 输出 [0 1 3 4]

console.info(array.slice(1)) // 获取数组从第2个元素开始的所有元素 输出 [1 3 4]

console.info(array.slice(1, 3)) // 第一个参数是截取开始的位置（包括），第二个参数是截取结束的位置（不包括） 输出 [1 3] 也就是列出 索引 1 索引2 的数字

array.pop() // 删除最后一个 并返回

console.info(array) // 输出 [0 1 3]

array.shift() // 删除第一个 并返回

console.info(array) // 输出 [1 3]

console.info(array.includes(3)) // 返回数组是否包含指定值 输出 true

console.info(array.join(',')) // 返回一个逗号分隔字符串 输出 1,3

// 对象数组

const arrayOjb = [{ 'name': 'one', 'age': 15 }, { 'name': 'two', 'age': 1 }, { 'name': 'three', 'age': 6 }, { 'name': 'four', 'age': 15 }]

array = arrayOjb.filter(v => v.age > 10).map(v => v.name) // 列出所有人年龄大于10的名字

console.info(array) // 输出 ["one","four"]

const index = arrayOjb.findIndex(v => v.name === 'two') // 找到名字等于 two 的位置  输出 1

console.info(index) //如果没有找到满足条件的 返回-1

const b = arrayOjb.some(v => v.name === 'two') // 是否包含名字为 two的人  输出 true

console.info(b)

array = arrayOjb.sort((x, y) => { return x.age > y.age ? 1 : 0 }) // 按照年龄排序从小到大

console.info(array)

const n = arrayOjb.reduce((prve, v) => { return prve + v.age }, 0) // 所有人年龄总和

console.info(n) // 输出 37

// 去掉重复

const obj = arrayOjb.reduce((prve, v) => {

    if (prve.findIndex(item => item.age === v.age) < 0) {

        prve.push(v)

    }

    return prve

}, [])

console.info(obj)

 

 

# 代码格式检查并自动修复

npm run lint -- --fix

# 批量修改import引用 到 require引用

component: \(\) => import\('(.*?)'\)

component: resolve =>require(['$1'],resolve)

 

 

// 每当进入路由触发

  beforeRouteEnter (to, from, next) {

    next(vm => {

      vm.getDataList()

    })

  },

beforeRouteUpdate(to, from, next) {

   // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },

// 每当离开路由触发

 beforeRouteLeave (to, from, next) {

   next(vm => {

      vm.getDataList()

    })

 

 }

• to: 目标路由的相关信息 对象
• from：当前路由的相关信息 对象
• next：实行跳转的 函数。传入false，不进行跳转。