Router Transition not updates DOM unless refreshed
See original GitHub issueI 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>
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:
- Created 7 years ago
- Reactions:1
- Comments:9 (5 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
…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.