Exploring the depths of Vue.js routing through nesting

Question

Exploring the depths of Vue.js routing through nesting

My Current Route is

function route(path, view) {
return {
    path: path,
    meta: meta[path],
    component: resolve => import(`pages/${view}View.vue`).then(resolve)
   }
}

route('/', 'Home'),
route('/help', 'Help),
route('/blog', 'BlogList'),
route('/blog/:slug', 'BlogDetails'),

Everything seems to be working properly. However, I noticed that when I navigate from the /blog/:slug route and then click on a button in that component to go back to /help, the route pattern shows up as /blog/help instead of just /help.

javascript vue.js vue-router nested-routes

Answer 1

Answer №1

Take a look at my jsfiddle example using Vue.js routes, it might be helpful for you.

const Home = {
        template: '<h1>Home</h1>'
    };

    const Help = {
        template: '<h1>Help</h1>'
    };

    const Profile = {
        template: '<h1>Profile</h1>'
    };

    const User = {
        template: '<h1>User</h1>'
    };

    routes = [
        {path: '/', component: Home},
        {path: '/help', component: Help},
        {path: '/user', component: User},
        {path: '/user/:id', component: {
            render(h) {
                return h(
                    'h1',
                    { style: {color: 'skyblue'} },
                    `User id: ${this.$route.params.id}`
                );
            }
        }}
    ];

    const router = new VueRouter({
        routes
    });

    new Vue({
        router
    }).$mount('#app');

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   <div id="app">
        <router-link :to='{path: "/"}'>/</router-link> <br>
        <router-link :to='{path: "/help"}'>/help</router-link> <br>
        <router-link :to='{path: "/user"}'>/user</router-link> <br>
        <router-link :to='{path: "/user/userid"}'>/user/userID</router-link>
        {{$route.path}}
        <router-view></router-view>
        <br>
        <button @click='$router.go(-1)'>go back</button>
        <button @click='$router.go(1)'>go forward</button>
    </div>

Answer 2

Take a look at my jsfiddle example using Vue.js routes, it might be helpful for you.

const Home = {
        template: '<h1>Home</h1>'
    };

    const Help = {
        template: '<h1>Help</h1>'
    };

    const Profile = {
        template: '<h1>Profile</h1>'
    };

    const User = {
        template: '<h1>User</h1>'
    };

    routes = [
        {path: '/', component: Home},
        {path: '/help', component: Help},
        {path: '/user', component: User},
        {path: '/user/:id', component: {
            render(h) {
                return h(
                    'h1',
                    { style: {color: 'skyblue'} },
                    `User id: ${this.$route.params.id}`
                );
            }
        }}
    ];

    const router = new VueRouter({
        routes
    });

    new Vue({
        router
    }).$mount('#app');

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   <div id="app">
        <router-link :to='{path: "/"}'>/</router-link> <br>
        <router-link :to='{path: "/help"}'>/help</router-link> <br>
        <router-link :to='{path: "/user"}'>/user</router-link> <br>
        <router-link :to='{path: "/user/userid"}'>/user/userID</router-link>
        {{$route.path}}
        <router-view></router-view>
        <br>
        <button @click='$router.go(-1)'>go back</button>
        <button @click='$router.go(1)'>go forward</button>
    </div>

Exploring the depths of Vue.js routing through nesting

Answer №1

Similar questions

Scrolling automatically to a DIV is possible with jQuery, however, this feature is functional only on the initial

Troubleshooting the issue of React forms hook not functioning properly with Material UI Select input

Make the download window appear automatically when downloading a file

The tooltip being displayed is plain and lacks any design elements

Converting an array of date strings to a single string in JavaScript

Is there a clash between jquery_ujs and Kaminari AJAX functionality in Rails 4?

The curious case of looping and peculiar Vue actions

What is the best way to define the active <li> tab using JQuery?

What could be causing the JQuery date picker to fail to load on the initial ng-click event?

What steps can be taken to identify the two highest numbers in an array, one being positive and the other

Utilizing Angular2 Guard to Ensure False IdentityServer4 OIDC Security

Trigger a click event on a nested Angular 13 component to remove a class from its grandparent component

Implementing long-lasting login functionality in React using JSON Web Tokens

Ways to avoid caching statically generated pages without having to enable ISR in Next.js

Using a Javascript loop to showcase values from a database

Having trouble with the Angular router link suddenly "failing"?

Change the size of a particular div upon hovering over another element

Utilizing the jquery-confirm library in a Laravel 5.5/Vue.js application

Issues with AJAX function not being successfully transmitted

How can one leverage Node JS to effectively manage events?