How to set query parameters for page root using routings?

Question

JavaScript

Is it possible in Vue to set the root page parameters when accessing it using routing, it all works when going to the next steps, but it's not clear how to do it for the main page.

import Vue from 'vue'
import Router from 'vue-router'

import Home from "../components/Home"
import StepOne from "../components/Step1"

Vue.use(Router);

let router = new Router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home,
        },
        {
            path: '/step1',
            name: 'step1',
            component: StepOne
        }
    ]
})

<router-link tag="button" class="btn btn-default" :to="{ name: 'step1, query: { plan: 'private' } }">Да</router-link>

Answer 1

In the main page component, use the beforeRouterEnter hook.
In it, check for the presence of query parameters and redirect where necessary, if not. Be careful with endless transitions.