Vue router link add object in the url

Question

This is my setting:

main.js creates a vue and attaches the component App to an element in the dom
router.js sets the routs
App.vue has the router-view and a few router-links

Problem:

the link <router-link to="/admin">Admin1</router-link> works fine
the link <router-link to="{name: 'admin'}">Admin2</router-link> doesn;t work and adds to the url bar: #/{name: 'admin'}

Am I using the router in the wrong way? Below my files in details

main.js

import Vue from 'vue'
import router from './router'
import App from './App'

new Vue({
  router,
  el: '#app',
  components: { App },
  template: '<App/>',
  data: {
  }
})

router.js

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

import HelloWorld from '@/components/HelloWorld'
import Marketplace from '@/components/Marketplace'
import Admin from '@/components/Admin'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/marketplace',
      name: 'marketplace',
      component: Marketplace
    },
    {
      path: '/admin',
      name: 'admin',
      component: Admin
    }
  ]
})

App.vue

<template>
  <div id="app">
    <p>
      <router-link to="/">Home</router-link>
      <router-link to="/admin">Admin1</router-link>
      <router-link to="{name: 'admin'}">Admin2</router-link>
    </p>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

since its json object, you should change to paramter to :to

Onur Özkan
– Onur Özkan

2018-02-23 10:35:15 +00:00
Commented Feb 23, 2018 at 10:35 — Onur Özkan
– Onur Özkan, Commented Feb 23, 2018 at 10:35
I LOVE STACKOVERFLOW

piggyback
– piggyback

2018-02-23 10:37:34 +00:00
Commented Feb 23, 2018 at 10:37 — piggyback
– piggyback, Commented Feb 23, 2018 at 10:37

Ru Chern Chong · Accepted Answer · 2018-02-23 10:35:02Z

3

In order for your to="{name: admin}" to work without adding the char #, do the following inside your router config file.

Also you are supposed to use the v-bind for to="".

Use v-bind:to="{name: 'admin'}" or :to="{name: 'admin'}"

Example:

export default new Router({
  mode: 'history',
  // whatever you have
})

Source: https://router.vuejs.org/en/essentials/history-mode.html

answered Feb 23, 2018 at 10:35

Ru Chern Chong

3,77613 gold badges36 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Vue router link add object in the url

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