question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Router Transition not updates DOM unless refreshed

See original GitHub issue

I am using vue 2.0.1 and router 2.0.0. I installed webpack template via cli following This link. The problem is when I click a link, the view does not update or change but the address bar shows change in route. Then I refresh the page and DOM gets updated and hence shows the component as expected but again If I click to the previous link, same problem follows with same solution i.e. refresh.

Here is my setup!

// sidebar.vue

<template lang="html">
  <aside class="menu" style="padding:10px 0 0 15px;">

  <ul class="menu-list">
    <li><router-link to="/">Dashboard</a></li>
    <li><router-link to="/customers">Customers</router-link></li>
  </ul>
</aside>
</template>

//router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Right from './Right'
import Customers from './Customers'


Vue.use(VueRouter)

const routes = [
  { path: '/', component: Right },
  { path: '/customers', component: Customers }
]
const router = new VueRouter({
  routes // short for routes: routes
})

export default router

// App.vue

<template>
  <div class="columns">

      <sidebar></sidebar>

      <router-view class="view"></router-view>

  </div>
</template>

<script>
import router from './components/router.js'
import Sidebar from './components/Sidebar.vue'

export default {
  router,
  components: {
    Sidebar
  }
}
</script>

// main.js

import Vue from 'vue'
import router from './components/router.js'

import App from './App'

new Vue({
  router,
  // el: '#app',
  render: h => h(App)
}).$mount('#app')

// index.html

<div id="app">
</div>

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
Leonard1980commented, Oct 12, 2016

I experience the same problem. By the look of Lahori-Jawan’s code, It might be the same as what I experince. Here is the code:

https://github.com/Leonard1980/VueRouterTest

I don’t know what is all about, but I’m guessing it might be a bug on not triggering the hashchange event.

@LinusBorg I posted this also on the forum. Thanks.

1reaction
LinusBorgcommented, Oct 11, 2016

…and if it’s not reproducible on jsfiddle (please show!), then create a repository on github.

We work on this in your free-time, and setting up actual reproductions from some code snippets in an issue takes away a lot of our time, while you already possess the exact setup that leads to the problem.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Router works only after refreshing the page
I am a bit new to react and I am facing a problem with the Router. The routing works when I enter the...
Read more >
How to Prevent Transitions with React Router - ui.dev
In this up-to-date guide, you'll learn how to use React Router's Prompt component to warn a user before they transition away from a...
Read more >
Migrating to React Router v6: A complete guide
Migrate your React Router applications from v5 to v6 with this in-depth guide, including a review of additions and improvements from v5.
Read more >
Enter/Leave & List Transitions - Vue.js
Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools...
Read more >
next/router | Next.js
If you do not want this behavior, you have a couple of options: Manually ensure each state is updated using useEffect . In...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found