Can I use Vuejs router routes array to dynamically create a nav?

Question

Here is my code to setup the vuejs routes and pass into router:

export const routesArray = {
  routes: [
    {
      path: '/',
      name: 'Add Stash',
      component: Form
    },
    {
      path: '/log',
      name: 'Stash Log',
      component: Stitch
    },
    {
      path: '/user/register',
      name: 'Register',
      component: Register
    },
    {
      path: '/user/login',
      name: 'Log in',
      component: Login
    }
  ]
}
export default new Router(routesArray)

I'm importing this code into a Vue Component and using it to loop through the array and dynamically output the navigation like this:

<ul class="nav">
  <li v-for="item in routes">
      <a :href="item.path"> {{item.name}}</a>
  </li>

This display works like a dream, but when I click on a nav item, it goes to a broken link: http://localhost:8080/log#/

Instead of this: http://localhost:8080/#/log

I'm not sure how to get around that hash? Any ideas?

CyberAP · Accepted Answer · 2018-01-11 11:49:07Z

1

Use router-link instead of a.

<li v-for="item in routes">
    <router-link :to="item.path">{{item.name}}</router-link>
</li>

answered Jan 11, 2018 at 11:49

CyberAP

1,2231 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can I use Vuejs router routes array to dynamically create a nav?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related