[Vuejs]-Vue Routes URL: username/pagename

by

0👍

You need to do this in the router. like this:

{
  path: 'username',
  meta: { label: 'Username'},
  component: {
    render (c) { return c('router-view') }
  },
  children: [
    {
      path: 'home',
      name: 'Home',
      component: Home
    },
    {
      path: 'exp',
      name: 'Exp',
      component: Cards
    },
    {
      path: 'about',
      name: 'About',
      component: About
    },
    {
      path: 'other',
      name: 'Other',
      component: Other
    }
  ]
}

So u add childs to your path.. this makes the url look like /username/exp

👤Ernst Reidinga

0👍

The main problem was using ‘ / home’ in the path. This is why it goes localhost:8080/home instead of localhost:8080/user/1/home

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'home',
          name: 'home',
          component: Home
        },
        {
          path: 'exp',
          name: 'exp',
          component: Exp
        },
        {
          path: 'skills',
          name: 'skills',
          component: Skills
        },
        {
          path: 'about',
          name: 'about',
          component: About
        }
      ]
    }
  ]
})

User.Vue

<template>
    <div>
        user
        <div>This is Bar {{ $route.params.id }}</div>
        {{personal.name}}
        <router-link :to="{ name: 'personal' }">Personal Info</router-link>
        <router-view></router-view>
    </div>
</template>
👤Caner Sezgin

Leave a comment