Vue 1.0 - > 2.0 router.start Issue

以前使用router.start w/Vue 1.0。遷移到Vue公司2.0+，而解決這個問題的時候折舊運行到問題（沒有明確的錯誤）：https://vuejs.org/v2/guide/migration-vue-router.html#router-start-replaced Vue 1.0 - > 2.0 router.start Issue

此前，main.js -

-router.start(
- App, 
- "#flightdeck-app", 
- () => { console.log(`app rev ${REVISION}. INTERNAL mode '${INTERNAL}'`) } 
-)

哪裏App是初始化存儲並呈現其餘的根組件的組件樹。用下面的代碼替換失敗 - 沒有來自npm run dev的錯誤，也沒有控制檯中的任何錯誤。

我看到：

應用程序組件渲染其<header>
應用程序組件不渲染其<router-view>。
控制檯沒有錯誤。

main.js坐騎的應用程序（我們加載應用程序組件）：

// main.js 
import Vue from "vue" 
import VueRouter from "vue-router" 
import App from "./App" 
import Overview from "./components/Overview.vue" 
import ItemList from "./components/ItemList.vue" 

Vue.use(VueRouter) 

const router = new VueRouter({ 
    mode: "history", 
    linkActiveClass: "active", 
    routes: [ 
    { path: "/", component: Overview }, 
    // Other paths 
    { path: "*", redirect: "/" } 
    ] 
}) 

router.beforeEach(function() { 
    window.scrollTo(0, 0) 
}) 

export const app = new Vue(Vue.util.extend({router, App}, App)).$mount("#flightdeck-app")

的App組件如下所示（我們沒有看到<router-view>渲染）：

// App.vue 
<template> 
<div id="app"> 
<header> 
    <div class="mark"> 
    <h1><router-link to="/">flightdeck</router-link></h1> 
    </div> 
</header> 
<div class="content"> 
    <transition name="fade" mode="out-in"> 
    <keep-alive> 
     <router-view :state="state" class="view"> 
     </router-view> 
    </keep-alive> 
    </transition> 
</div> 
</div> 
</template> 

<script> 
import store from "./store" 
import Overview from "./components/Overview" 

export default { 
    components: { 
    "overview": Overview 
    }, 

    data() { 
    return { 
     state: store.state, 
     refresh: false 
    } 
    }, 

    created() { 
    store.restoreCreds() 
    }, 

    mounted() { 
    // Populate the store with our objects. 
    // The Item component is expected to refresh the store as needed. 
    store.fetchAll() 
    } 
} 
</script>

在JS控制檯中看不到錯誤使得這一點很難。

來源

2016-11-26 elithrar

你得到的錯誤是什麼？ – Saurabh

@saurabh無。組件不在內部渲染組件（也不在Vue Chrome擴展中顯示，因此不存在）。更新了問題以反映當前狀態。 – elithrar

你爲什麼要使用Vue.util.extend在這裏？

export const app = new Vue(Vue.util.extend({ 
    router, 
    App 
}, App)).$mount("#flightdeck-app")

這樣做是否行得通？

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

來源

2016-11-28 02:12:22

components應該是名稱componentVariable對像：

components: { 
    app: app 
}

報價從doc：A *hash(map)* of components to be made available to the Vue instance.

來源

2016-11-27 10:05:14

Vue 1.0 - > 2.0 router.start Issue

回答

相關問題