Vue: restrict entry to the view unless props are configured

Currently, I am in the process of creating a Vue game that consists of two main views: a 'setup' view and a 'play' view. The values that are configured in the setup view are then passed as props to the play view, initiating the game with those specific parameters.

However, there is a potential issue where users can directly access the .../#/play route without going through the setup process to set the required props. To address this, I have implemented default values as a temporary solution...

props: {
  prop: { default: 'default value' },
  // ...
},

...yet, I am contemplating on how to completely restrict access to the play view if a user did not navigate from the setup view .../#/setup. While I am familiar with using required: true and navigation guards, I am uncertain about the best approach to apply them in this scenario or if they are the most effective solutions available.

Is there a simple method to automatically redirect users when directly accessing the .../#/play route?

javascriptvue.jsvuejs2vue-componentvue-router

Answer №1

To control navigation, you can implement the beforeEnter navigation guard:

routes: [
  {
    path: '/setup',
    name: 'setup',
    component: Setup
  },
  {
    path: '/play',
    name: 'play',
    component: Play,
    props: true, // <-- converting params to props
    beforeEnter: (to, from, next) => {
      if (to.params.myprop) {
        next(); // <-- everything good, proceed
      } else {
        next({ name: 'setup' }); // <-- redirect to setup
      }
    }
  }
]

This code ensures that a specific parameter is present before allowing access to the play route, otherwise it redirects back to setup.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to utilize regex for replacing a string within Node.js environment?

I'm struggling with updating the string in my code. Essentially, I have a .php file and I want to modify some constants using the replace package. The output of my current code is: // Current Output define('DB_NAME', 'foo'); // ...

javascriptregexnode.js

Exploring the power of Node.js and EJS through the art of

Recently delving into the world of node.js, I encountered a puzzling issue with my EJS template. It seems that my for loop is not executing properly within the EJS template while attempting to create a basic todo app. Below is the structure of the project ...

javascriptnode.jsloopsexpressejs

Changes made to code within the node_modules directory do not appear in the browser

I encountered a bug in the vuejs-datepicker project on Github, prompting me to fork the repository. However, despite making changes to the forked project, these alterations are not reflected in my main project that relies on this dependency. Here's a ...

javascriptnode.jsvue.jsnpmwebpack

How to utilize jQuery to replace the first occurrence of a specific

Suppose I have an array structured like this: var acronyms = {<br> 'NAS': 'Nunc ac sagittis',<br> 'MTCP': 'Morbi tempor congue porta'<br> }; My goal is to locate the first occurrence ...

javascriptjquery

Tips for transforming every element of an array into its own array using JavaScript or Loadash

Hello, I have an array that looks like this. I am attempting to convert each element into its own array. I tried using lodash's chunk function but was unsuccessful. [ 'Product 1', 'Product 2', 'Product 3', 'Product ...

javascriptarraysnode.jsunderscore.jslodash

Developing an IF statement in JavaScript that relies on hexadecimal color values

I've created a JavaScript code that changes the background color of my webpage every time it loads: document.getElementById("band").style.background = '#'+(Math.random()*0xFFFFFF<<0).toString(16); To improve visibility, I am aiming t ...

javascripthtml

"The debate over using 'stringly typed' functions, having numerous redundant functions, or utilizing TypeScript's string enums continues to divide the programming

I have a specific object structure that contains information about countries and their respective cities: const geo = { europe: { germany: ['berlin', 'hamburg', 'cologne'], france: ['toulouse', ' ...

javascripttypescriptfunctionenumsfunctional-programming

React Native: A guide to triggering a modal or action sheet when a button tab is clicked using Wix React Native navigation

Is it possible to trigger a modal or actionsheet by clicking on a specific bottom tab in a tab-based application using wix react native v2 navigation? These are the current packages and versions I am working with: react-native : "0.59.8" react : "16.8. ...

javascriptreactjsreact-nativewix-react-native-navigation

What are the benefits of using default ES module properties for exporting/importing compared to named module properties?

Currently studying the Material UI documentation, I came across this statement: It is noted in the example above that we used: import RaisedButton from 'material-ui/RaisedButton'; instead of import {RaisedButton} from 'material-ui&apo ...

javascriptreactjstypescriptecmascript-6material-ui

Attempting to achieve a carousel animation using jQuery

Upon loading the page, only one character out of four is displayed. Two arrows are provided - one on the left and one on the right. Clicking on the left arrow causes the current character to fade out and the previous character to fade in. Clicking on the r ...

javascriptjqueryhtmlcss

The PHP equivalent of converting data to a JSON string, similar to the

When working with PHP's json_encode($array), I've noticed that diacritics can sometimes get messed up. However, if I update my database column to type text and pass javascript-created JSON over HTTP, everything appears fine. The issue arises when ...

javascriptphpjsonequivalent

Attempting to incorporate the jquery-mousewheel plugin into the jquery cycle2 library

I've been working on integrating the jquery-mousewheel plugin (https://github.com/jquery/jquery-mousewheel) with the jquery cycle2 plugin. Initially, everything was running smoothly until I encountered an issue where mouse scrolling was generating ex ...

javascriptjquerymousewheeljquery-cycle2

AJAX request function is only successful on the first attempt

Currently, I am implementing AJAX functionality to verify whether a user-input ID exists in the database. If the ID is found, a check mark is displayed; if not, a cross mark is displayed. The issue arises when I input an ID for the first time, which is pr ...

javascriptjqueryajaxwordpress

Updating your Heroku app (Node.js) from a GitHub repository - a step-by-step guide

I attempted to deploy my React app using the following process: git status git remote add origin <repo link> git commit -m "node js" git add . Unfortunately, this method did not work for me. Can anyone provide guidance on how to update a ...

javascriptnode.jsreactjs

What is the reason behind the non-linear execution sequence of JS functions when controlling an sqlite3 database?

In my Node.js application, I have a SQLite3 controller function like this: exports.findUser=function findUser(user){ var temp ; var db = new sqlite3.Database('kitchen.db'); var stmt_user_find = "SELECT * FROM user WHERE un = ?"; db.all(stmt_user ...

javascriptnode.jsexpresssqlite

Transferring information among components and incorporating the ngDoCheck function

We are currently working on transferring data from one component to another using the following method. If there is no data available, we display an error message; however, if there is data present, we populate it in a select box. showGlobalError = true; ...

javascriptangulartypescriptangular7

Can allowedDate be used for asynchronous or AJAX operations in Vuetify?

I have a question methods: { allowedDates(date) { console.log(date) } }, This will display all dates for every selected month in the console However, if I include an asynchronous script like this : methods: { allowedDates(date) { ...

vue.jsdatepickervue-componentvuexvuetify.js

What is the best way to extract the value from a JSON URL?

Using AngularJS, I am looking to dynamically retrieve the price value from a URL's JSON data. Is this feasible? Here is the URL JSON: link Below is my controller: angular.module("myApp",['zingchart-angularjs']).controller('MainContro ...

javascriptangularjsjson

The input tag contains an empty Request.Form

My issue lies in using Request.Form to retrieve text from an input field, as the value always ends up being empty. My goal is to extract the text value from the input tag and use it to query my database. I have attempted to write to an ASP TextBox but enco ...

javascriptc#htmlasp.netrequest.form

Showcase -solely one property object- from numerous property objects enclosed within an array

Hello, I am seeking assistance as I have recently begun learning about angularJS. I am working with objects that have keys such as: scope.eventList=[]; for(){ var event = { id : hash, ...

javascripthtmlarraysangularjsangularjs-ng-repeat