CODEWITHSUNDEEP
vue.jsvuejs2vue-router
rpivovar
rpivovar

Reputation: 3448

vue-router : router-link not working

I'm trying to use vue-router and router-link. When I click on the link, the URL updates correctly, but nothing is loaded into <router-view></router-view>. I'm guessing this has something to do with using the unpkg CDNs rather than building this with vue-CLI? I'm not really sure why this isn't working.

index.html

....

<body>

    ....

    <nav id="app">
        <li><router-link to="/hello">Hello</router-link></li>
    <nav>

    <!--view-->
    <router-view></router-view>

    ....
    <!--vue.js-->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <!--router-->
    <script src="js/router.js"></script>
</body>

router.js

const Hello = { template: '<div>test</div>' }

const routes = [
  { path: '/hello', component: Hello }
]

const router = new VueRouter({
  routes
})

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

I've tried removing the <li> </li> around the router-link, but this doesn't seem to help.

Upvotes: 7

Views: 41569

Answers (5)

FlepJack
FlepJack

Reputation: 19

Clearing my browser history helped me

Upvotes: 1

user956584
user956584

Reputation: 5558

Just add key to 

<router-view id="view" :key ='$route.params.id || $route.params'

or when pass param is id and users click also on # links so its not refresh

<router-view id="view" :key ='$route.params.id || $route.params'

Upvotes: 0

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

You are using const app = new Vue({}), this creates a new vue instance

then you are using $mount() which takes in an element selector as an argument.

What $mount() does is, it manually mounts the Vue instance to the associated DOM element that you pass as the argument

In your code, only the nav element has the id of app which means only the nav element is mounted to your Vue instance not the router-view which is outside of the nav element.

That is why your answer of adding a wrapper with an id of app works because now the router-view is also associated with the Vue instance.

You can refer to:

vm.$mount() , Vue instance

Upvotes: 8

Haritsinh Gohil
Haritsinh Gohil

Reputation: 6282

In my case router-link is not working because i have sidebar outside of <div id="app"></div>

So the moral of the story is we have to put all vue related element or stuff in the div which we have used for mounting in app.js

So Structure of html Should be as Below:

<html>
<body>
 <div id="app">
  <aside>
    <!-- sidebar -->
    <li><router-link to="/users">Users</router-link></li>
    <li><router-link to="/home">Home</router-link></li>
  </aside>
  <div class="content">
    <!-- Main content -->
    <event-hub></event-hub>
    <router-view></router-view>
  </div>
 </div>
</body>
</html>

Upvotes: 1

rpivovar
rpivovar

Reputation: 3448

It works when I attach the app id to a wrapper <div> around everything, like this:

....

    <div id="app">

        <nav>
            <li><router-link to="/hello">Hello</router-link></li>
        <nav>
    </div>

Upvotes: 2

Related Questions