关于vue的一些常见知识点，你忘了吗？

百年孤独html
749 阅读3分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

好记性不如烂笔头！

翻了翻自己从事前端以来收藏的关于vue的一些的知识点，在节前的空闲时间就整理出来，回忆一下这些常见的知识点。

vue-cli创建项目

  • 全局安装：
npm install  -g vue-cli
  • 检查是否安装成功：（-V必须大写）
vue -V // 或者
vue -version
  • 创建项目：
vue init webpack vue-demo
  • 进入到项目中：
cd vue-demo
  • 运行项目：
   npm run dev

导航守卫动态修改标题

在router文件里面注册页面路由的时候，加上对应页面的标题，然后在router.afterEach里面对标题进行修改：

image.png

router.afterEach (function (to, from) {
  document.title = to.meta.title //跳转后设置页面的title
});

vue路由跳转的几种方式

总的来说，vue-router传递参数分为两大类：编程式(router.push)和声明式(<router-link>)

编程式导航

  • 无参数跳转

编程式导航传递参数有两种类型：字符串 、 对象。

this.$router.push('地址')

this.$router.replace('地址')

replace和push的区别，push有记录一个history，replace没有；

const newUrl = this.$router.resolve({name: '地址'})
window.open(newUrl.href,'_blank')

resolve可用新页面打开，使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口。

  • 携带参数跳转 注意：和name配对的是params，和path配对的是query

image.png 携带参数的方式有两种：query和params

1. query

this.$router.push({ path: '/usersManage', query: { userId: 111 }});

在页面中接收该参数：

console.log(this.$route.query.userId) // 111

2. params

this.$router.push({ name: 'usersManage', params: { userId: 111 }})

在页面中接收该参数：

console.log(this.$route.params.userId) // 111

声明式导航

<router-link to='地址'></router-link>

<router-link :to="{ name: '地址', params: { userId: 111}}"></router-link>

<router-link :to="{ path: '/地址', query: { userId: 111}}"></router-link>

区别在于：

  • 1.命名路由搭配params，刷新页面参数会丢失
  • 2.查询参数搭配query，刷新页面数据不会丢失
  • 3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

vue的style中使用变量

<div :style="{'color': textColor}">你好</div>

这里的textColor就是自己声明的变量，可以根据需求改变样式。

顺便写一下class中常见变量的使用： class:

 <i class="iconfont" :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>

这里通过判断isCollapse来给icon添加样式。

vue中使用go()和back()两种返回上一页的区别

  • history.back(-1)：直接返回当前页的上一页，是个新页面

  • history.back(0)： 刷新

  • history.back(1)： 前进

  • history.back(-1)： 后退

  • history.go(-1)：也是返回当前页的上一页，不过表单里的数据全部还在

  • history.go(1)：前进

vue动态修改$router参数


import merge from 'webpack-merge'
 
// 修改原有参数        
this.$router.push({
    query:merge(this.$route.query,{'name':'weirui'})
})
 
// 新增一个参数：
this.$router.push({
    query:merge(this.$route.query,{'name':'weirui'})
})
 
// 替换所有参数：
 this.$router.push({
    query:merge({},{'name':'weirui'})
}）

vue修改elementUi样式无效问题

image.png

/deep/ {
  .el-drawer {
    text-align: right;
  }
  .el-tree-node__label {
    font-size: 18px;
  }
  .el-tree-node__content {
    margin-bottom: 10px;
  }
}

Vue标签style中添加背景图片

 <div
    class="banner-img"
    :style="{ backgroundImage: 'url( ' + banner + ')' }"
  ></div>
  
 <div
    class="banner-img"
    :style="{'background-image': 'url(' + banner + ')'}"
  ></div>

vue实现监测浏览器自带返回按钮

在项目中有时候会需要监听自带返回按钮并且做一些操作


  // 挂载完成后，判断浏览器是否支持popstate
  mounted(){
    if(window.history && window.history.pushState){
        // 往历史记录里面添加一条新的当前页面的url
        history.pushState(null,null,document.URL);
        // 给 popstate 绑定一个方法 监听页面刷新
        window.addEventListener('popstate', this.backChange, false);
      }
  },
  
  // 页面销毁时，取消监听。否则其他vue路由页面也会被监听
  destroyed(){
    window.removeListener('popstate', this.backChange,false)
  },
  
  methods: {
    // 将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致
    backChange(){
        this.$emit('change',false)
    }
  }

base64图片的显示

<img :src="imageData"/>

imageData =  'data:image/png;base64,' + 后端传来数据

| 写在最后

就暂时整理出来了十个小问题，当然这些解答不是问题的唯一答案，只是在过去项目中曾经遇到过的一些常见的小问题，老话还是真理呀，好记性不如烂笔头，记性不好的我只能多动手了。

avatar
文章
阅读
粉丝