vue2.0构建一个SPA,router-view不切换

vue切换到2.0,vue-router也是2.0版本,代码如下,router-view没有变化,肯定哪里写错了,我现在看迷糊了,实在找不出来了,求助

/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>{ msg }</h1>
</div>
</template>
<script>
import loader from './../../../router/loader'
export default {
  name: 'index',
  data () {
    return {
      msg: 'This is 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>
sunday

准确的来说,vue router根本就没 “ 启动 ” ,vue dev tools给的节点只是一个

sunday

不仅没有router没有 “ 启动 ” ,连store都没set进去route。

vuex的state里面route是empty的。

但是vuex-router-sync并没有发现什么问题啊

import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'
sync(store, router)
Tomoe 回复 sunday

還沒細看,不過麻煩再貼一下 package.json ~

sunday 回复 Tomoe
"dependencies": {
    "vue": "^2.0.3",
    "vue-resource": "^1.0.0",
    "vue-router": "^2.0.1",
    "vuex": "^2.0.0",
    "vuex-router-sync": "^2.1.1"
  },

全部升级到2版本

sunday 回复 Tomoe

我把各种东西排除,现在发现好像是vuex-router-sync的问题,sync(store, router)其中router参数貌似不对,不过我是模仿尤大的hacknews2写的,还是没发现解决办法,继续

JellyBool

其实我还没有用过 vuex 。。等 tomoe 大神来回答吧

sunday 回复 JellyBool

其实排除vuex,一样是不行,愁死我乐

sunday 回复 JellyBool

不对,我把各种东西排除,现在发现好像是vuex-router-sync的问题,sync(store, router)其中router参数貌似不对,不过我是模仿尤大的hacknews2写的,还是没发现解决办法,继续

Tomoe

我試了下,把 Async Component 的方式改為普通讀取可以正常運行,可能是出在 webpack 的配置,照理來說他在 Compile 時會把你要異步讀取的組件給 split 成多個 chunk ,你檢查下是否有正常切割。

sunday 回复 Tomoe

ok,我发现的时,加上vuex-router-sync,会报错:no path,sync(store, router)其中router参数貌似不对,sync里面有个,router.afterEach(…){…},这个貌似是router的钩子吧,但是没有道理会错呢,我先试试你说的

Tomoe 回复 sunday

發現問題在哪裡,更新下 vuex-router-sync 的版本

$ yarn add vuex-router-sync@3.0.0
$ npm install vuex-router-sync@3.0.0

至於 Async Component 那邊可以不用改,直接安裝 vuex-router-sync 會安裝到舊的版本,必須直接指定版本。

測試一切正常

sunday 回复 Tomoe

我擦,坑了,真是个坑,npm outdated看了下最新2.1.1。。。。。还有个3.0.0,好了,真的好了,哭了,一下午啊

Tomoe 回复 sunday

藏在 github next brach 裡面,作者應該是忘記更新 master 那裡的 raedme,是坑沒錯 哈哈哈哈哈