vue如何带值返回原页面，原页面不刷新？

本人做了一个手机自定义拍照的页面，流程是这样：拍照后进入画布可以旋转图片，重新拍，我需要他拍照完成后返回原来的画布界面，把值能传回来，界面还保留原来的样子，不要刷新。

简单说就是不用系统自带的相机，自己写的相机页面，但是需要来回跳转，如何跳转回去还是那个页面，把值也传回去了

我不是专业的前端，所以有什么方法能实现呢，就比如Java里面直接return回去；

全局变量，浏览器缓存？

引用皆我百晓生小程序回复内容作答：
在Vue.js中，你可以使用Vue Router来实现页面之间的跳转，并通过路由传递数据而不刷新页面。下面是一个简单的示例，演示如何返回原页面并传递数据：

首先，在Vue组件中设置路由链接，将当前页面作为一个子路由嵌套到父组件中，保持画布界面不刷新。

<!-- 父组件 -->
<template>
  <div>
    <router-link :to="{ path: '/canvas' }">进入画布</router-link>
    <router-view></router-view>
  </div>
</template>

在路由配置中，将画布页面设置为子路由，传递参数。

// 路由配置
const routes = [
  {
    path: '/',
    component: ParentComponent
  },
  {
    path: '/canvas',
    component: CanvasComponent
  }
];
const router = new VueRouter({
  routes
});

在画布界面组件中，你可以使用Vue Router提供的this.$router.push()方法来跳转回原来的页面，并传递数据。

// 画布页面组件
export default {
  methods: {
    returnToParent() {
      // 传递数据
      const data = '我是传递的数据';
      this.$router.push({
        path: '/', // 原来的页面路径
        query: { data } // 传递的数据
      });
    }
  }
}

在父组件中，你可以通过$route.query来获取传递的数据。

// 父组件
export default {
  created() {
    const data = this.$route.query.data; // 获取传递的数据
    // 使用传递的数据进行处理
    console.log(data);
  }
}

通过以上步骤，你可以在画布界面中使用returnToParent()方法跳转回原页面，并传递数据。在父组件中，你可以获取传递的数据，并进行处理，而不刷新页面。

【以下回答由 GPT 生成】

首先，要实现在返回原页面时带回数值而不刷新页面的功能，可以使用Vue.js提供的路由导航功能。

首先，你需要使用Vue Router库来管理页面的路由。你可以使用npm或yarn来安装Vue Router，然后在你的Vue.js项目中导入和使用它。

```bash # 使用npm安装Vue Router npm install vue-router

# 使用yarn安装Vue Router yarn add vue-router ```

创建Vue Router的实例并配置路由表。在你的项目中创建一个新的Router实例，并使用routes配置路由表。你可以为每个页面定义一个路由，并使用component属性指定对应的组件。在这个例子中，你可以为拍照页面和画布页面分别创建两个路由。

```javascript // 在main.js文件中导入Vue Router import VueRouter from 'vue-router' import Vue from 'vue'

// 导入拍照页面和画布页面的组件 import TakePhoto from './components/TakePhoto.vue' import Canvas from './components/Canvas.vue'

// 注册Vue Router插件 Vue.use(VueRouter)

// 创建Vue Router的实例并配置路由表 const router = new VueRouter({ routes: [ { path: '/', component: TakePhoto }, { path: '/canvas', component: Canvas } ] })

// 在Vue实例中使用Vue Router new Vue({ router }).$mount('#app') ```

在拍照页面中，使用this.$router.push()方法来跳转到画布页面，并通过params参数传递需要带回的数值。

```html

```

在画布页面中，使用this.$route.params来获取传递过来的数值。

```html

传回的数值：{{ value }}

```

通过以上步骤，你可以在拍照页面点击"拍照完成"按钮后跳转到画布页面，并将数值传递到画布页面中显示。当你在画布页面点击"返回"按钮后，将会返回到拍照页面，并且保持画布页面的状态和样式。

请注意，以上代码只是示例，你需要根据你的实际需求来调整和修改代码。同时，你可能还需要在Vue.js项目中添加其他必要的配置和组件。如果你还有其他问题，请告诉我，我会尽力帮助你解决。

【相关推荐】

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/266408

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^