VUE 2.0和VUE路由器2.0構建SPA，路由器視圖沒有更新

建立與VUE 2和VUE路由器2和vuex 2單頁的應用程序，但不更新VUE 2.0和VUE路由器2.0構建SPA，路由器視圖沒有更新

/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>

我不知道什麼是代碼錯誤，<router-view>不會在更改路線時更新。

來源

2016-11-01 Sunday

實際上，路由器並沒有「啓動」，但vue開發工具只顯示我一個'3210'節點，爲什麼？ – Sunday

而開發工具Vuex顯示store state.route爲空 – Sunday

我認爲你的應用尚未正確初始化。你開始你的應用程序如下：

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

你有spread operator...App，這是沒有必要的 - 它是用來轉換陣列項目函數參數，並在這方面不正確的。相反，你應該使用在webpack template提供的渲染功能：

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

而且你已經嘗試import loader在路線和指標，如果你正在使用vue-cli這是沒有必要的。

也許你可以從webpack template開始，慢慢增加一個功能：從路由定義和路由組件開始，確保一切正常，最後添加vuex。

來源

2016-11-02 02:43:54 Mani

$mount('#app')是好的，我認爲這個問題是您routes.js

試試這個：

import Index from './../views/index.vue' 

const routes = [ 
    { path: '/index', name: 'index', component: Index } 
]

這裏是已經配置vue-router和vuex得當，你可以工作的WebPack模板初始化這個模板通過vue-cli，供您參考：https://github.com/CodinCat/vue-webpack-plus

來源

2016-11-02 04:33:37 CodinCat

VUE 2.0和VUE路由器2.0構建SPA，路由器視圖沒有更新

回答

相關問題