Navigating to a Different Vue or Page with Vue Form Wizard

Question

Navigating to a Different Vue or Page with Vue Form Wizard

I'm currently exploring VUE JS and trying to figure out how to redirect to another vue or page after submitting a form. I've been working with the sample code provided at https://stackblitz.com/edit/vue3-form-wizard-demo?file=src%2FApp.vue.

While I have successfully configured the form, I'm in need of some guidance or examples on how to redirect to another vue or page once a response is received.

<template>
    <h1>Vue 3 Form Wizard Demo</h1>
    <vue-form-wizard :form="wizardQuestions" v-model="formData" @submit="handleForm(formData)" />
</template>

<script>
    import VueFormWizard from 'https://unpkg.com/@anivive/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0979494d0ce859c818ed0849b9dcda2bdcb">[email protected]</a>/dist/index.umd.js';
  import './index.css';
  import wizardQuestions from './wizardQuestions.json';

export default {
  name: "App",
  components: {
    VueFormWizard
  },
  methods: {
    handleForm(data) {
      console.log(data);
    }
  },
  data() {
    return {
      formData: [],
      wizardQuestions: wizardQuestions
    };
  }
};
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

When attempting this.router.push, I encountered an undefined error.

javascript vue.js

Answer 1

Answer №1

The Vue documentation recommends using Vue Router as the official routing solution. If you tried to use router.push() and it didn't work, it might be because Vue Router is not included in your code sandbox by default and needs to be installed separately.

Alternatively, for simpler routing requirements, you can consider using dynamic components as mentioned in the Vue docs

Here is an example code snippet from the documentation:

<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

const currentPath = ref(window.location.hash)

window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})

const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>

<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>

Answer 2

The Vue documentation recommends using Vue Router as the official routing solution. If you tried to use router.push() and it didn't work, it might be because Vue Router is not included in your code sandbox by default and needs to be installed separately.

Alternatively, for simpler routing requirements, you can consider using dynamic components as mentioned in the Vue docs

Here is an example code snippet from the documentation:

<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

const currentPath = ref(window.location.hash)

window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})

const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>

<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>

Navigating to a Different Vue or Page with Vue Form Wizard

Answer №1

Similar questions

Steps for incorporating events on Jquery UI button

Tips for preventing duplicate properties in Material UI when using React JS

Transform input string containing newline characters into separate paragraphs

Illumination scope for directional lights in three.js

When there is an error or no matching HTTP method, Next.js API routes will provide a default response

Is it feasible to implement different themes besides 'light' and 'dark' in React Material UI?

How can I set up automatic language selection for Google Translate's menu indexing feature?

Is it necessary to compile Jade templates only once?

How can I resolve the issue of undefined VUE Props in my project?

Overcome the issue of 'Parsing Error: Kindly verify your selector. (line XX)' in Javascript/AWQL

The dependencies were not updated after running `npm install`

Error: The URI you are trying to access is restricted and access has been denied

Arrange the columns in the Table in both ascending and descending order

Transitioning JS/CSS effects when the window is inactive

What is the method for retrieving Vue Js computed properties?

Firebase User Becomes Undefined Upon Refreshing the Web Page

Troubleshooting HTML Output Display Issues

Personalize the drop area in Filepond

What is the process for uploading files with just node.js?

Seeking assistance with formatting output for OpenCPU and igraph