vue打印图片以及通过url传递参数

打印图片

1、终端执行  npm i vue-print-nb
2、main.js 中全局引入
import Print from ‘vue-print-nb’; //引入
Vue.use(Print); //注册
3、通过id绑定要打印的图片
<el-image id="imagePrint"
        style="width: 100px; height: 100px"
        :src="require('@/assets/img/icon.png')">
</el-image>
4、v-print绑定按钮
<el-button v-print="printObj">打印</el-button>

5.打印照片配置参数
data() {
  return {
    printObj:{
      id:'imagePrint'，//必须携带，
      popTitle：""，//打印配置页上方的标题
    },
  }
},
其他的参数一般不需要配置

url传递参数

我当时面临的需求是通过二维码跳转至某页面，这个过程需要传递参数。这种条件下我不能用以前的push。本来好兄弟让我通过window.location.href去拿url再拼接走一遍，最后还是百度出来了，以下是我总结的方法。由于保密性质，以下代码只看形似。

首先是在route的index.js中配置路由
 {
	 path: '/message/:name/:sex',
	 component: () =>import('@/components/student/message')
 },
 url请求如下：
 http://localhost'/message/zhangsan/男
 可以在mounted方法里对参数进行处理。
 let a=this.$route.params.name；//zhangsan
 let b=this.$route.params.sex；//男

自己的路要自己走，不拉别人陪跑。

续写：

本来以为这样已经可以了，但是吧，因为修改了路由，导致必须请求时必须带入参数，一般路由也是不需要的，就算我强行使用这个方法，因为我们用的若依框架，这么请求会导致界面没有左侧菜单栏的。一位前端小姐姐教我使用以下的方法拦截url：

vue文件是若依菜单指向的，这个方法是与mounted同级的
beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.newId= to.query.newId? to.query.newId: null;
    });
  },
  url如下：
  http://localhost'/message/zhangsan?newId=123456

完结撒花