vue 2.0 and vue-router 2.0 build SPA, router-view did not update

Question

Build A Single page app with vue 2 and vue-router 2 and vuex 2, but do not update

/src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'
sync(store, router)
new Vue({
  router,
  store,
  ...App
}).$mount('#app')

/src/router/index.js

import Vue from 'vue'
import routes from './routes'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  mode: 'history',
  routes
})
export default router

/src/router/routes.js

import loader from './loader'
const routes = [
  { path: '/index', name: 'index', component: (r) => require(['./../views/index.vue'], r) }
]
export default routes

/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {}
})
export default store

/src/view/index.vue

<template>
<div>
  <h1>Hello index</h1>
</div>
</template>
<script>
import loader from './../../../router/loader'
export default {
  name: 'index',
  created () {
    console.log('This is index')
  }
}
</script>

/src/App.vue

<template>
  <div id="app">
    <router-link :to="'index'">index</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'app',
  mounted () {
    console.log('Hello App')
  }
}
</script>

I do not know what's wrong with the code, the <router-view> do not update when I change the route.

Actually, the router did not "start up" yet, the vue dev tools just shows me a <APP> node, why? — Sunday

Mani Mani · Accepted Answer · 2016-11-02T02:43:54

I think your app is not properly initialized yet. You are starting your app as follows:

new Vue({
    router,
    store,
    ...App
}).$mount('#app')

You have the spread operator ...App, which is not necessary - it is used to convert array items to function args, and not correct in this context. Instead you should use the render function as provided in webpack template :

/* eslint-disable-line no-new */
new Vue({
    el: "#app",
    store,
    router,
    render: h => h(App)
})

Also you have attempted to import loader in routes and index, which is not necessary if you are using vue-cli.

Maybe you can start with the webpack template as base and slowly add functionality one step at a time: start with route definitions and your route components, ensure that everything works, and finally add vuex.

vue 2.0 and vue-router 2.0 build SPA, router-view did not update

2 Answers