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>

Answer 1

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