Tauri 打开新窗口

1、第一种方法（不推荐）

在tauri.conf.json设置新窗口的配置

在tauri.conf.json里面找到windows,在里面添加要打开新窗口的配置

第一个是主窗口,第二个是我们要创建的新窗口test页面

decorations是关闭自带的最大化、最小化、关闭按钮，

因为tauri运行就开始加载所以窗口，我们的新窗口要通过点击才能打开，所以给test窗口添加visible：false 创建这个窗口并且隐藏test窗口（不激活test窗口）。里面的url就是对应路由。每个窗口都有一个label标题，第一个窗口有默认label不需要自己设置

"windows": [
      {
        "fullscreen": false,
        "height": 600,
        "resizable": false,
        "title": "tauri-app",
        "width": 800,
        "decorations": false,
        "center": true,
        "maxWidth": 432,
        "maxHeight": 362,
        "alwaysOnTop": true,
        "url": "/"
      },
      {
        "width": 400,
        "height": 200,
        "decorations": false,
        "visible": false,
        "label": "test",
        "url": "/test"
      },
    ],

2、Index.vue(首页)

<template>
  <div class="index">
    <button @click="Win()">打开新窗口</button>
  </div>
</template>

<script>
import { appWindow, WebviewWindow } from "@tauri-apps/api/window";//引入
export default {
  name: "index",
  data() {
    return {};
  },
  methods: {
    Win() {
      //这个appWindow.hide();是实现登录之后隐藏（关闭）登录界面，然后再显示新打开的test界面
      //appWindow.hide();
      const testWindow = WebviewWindow.getByLabel("test");//这里就是获取label
      testWindow.show();
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
}
</style>

二、推荐用第二种方法

这种方法不需要在tauri.conf.json里面配置要打开的窗口配置，直接在前端调用创建窗口方法

index.vue

<template>
  <div class="index">
    <button @click="newwin()">打开新窗口</button>
  </div>
</template>

<script>
import { WebviewWindow } from "@tauri-apps/api/window"; //引入打开窗口功能
export default {
  name: "Index",
  data() {
    return {};
  },
  methods: {
    newwin() {
      const webview = new WebviewWindow("element", {
        url: "/element",
        // 可自行添加属性配置     窗口配置
        //center:true,
        //decorations:false
      });

      webview.once("tauri://created", function () {
        // webview window successfully created
        // 窗口创建成功 打印1
        console.log(1);
      });
      webview.once("tauri://error", function (e) {
        // an error happened creating the webview window
          // 窗口创建失败 打印2
        console.log(2);
      });

      // const testWindow = WebviewWindow.getByLabel("test");
      // testWindow.show();
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  margin-top: 30px;
}
</style>

效果和第一种差不多，但是个人感觉比第一种方法好