無法獲取vuejs2和VUE路由器沒有工作在客戶端

我，包括我的網頁vuejs和VUE路由器，並創建了一個app.js初始化路由器和VUE，但是路由不工作，我甚至不看到裏面定義爲<router-link to="/foo"> foo </router-link>無法獲取vuejs2和VUE路由器沒有工作在客戶端

的聯繫，這是代碼的簡化版本

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="../build/js/vue.min.js"></script> 
    <script src="../build/js/vue-router.min.js"></script> 
    <script src="../build/js/app.js"></script> 
</head> 
<body id="app"> 

<div class='nav'> 
    <router-link to="/foo">foo</router-link> 
    <router-link to="/bar">bar</router-link> 
    <router-link to="/tar">tar</router-link> 
</div> 


<div class="content"> 
     <router-view></router-view> 
</div> 

</body> 
</html>

我app.js距離這VUE路由器頁面的複製/粘貼或本example：

// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter and then call `Vue.use(VueRouter)`. 

// 1. Define route components. 
// These can be imported from other files 
const Foo = { template: '<div>foo</div>' } 
const Bar = { template: '<div>bar</div>' } 

// 2. Define some routes 
// Each route should map to a component. The "component" can 
// either be an actual component constructor created via 
// `Vue.extend()`, or just a component options object. 
// We'll talk about nested routes later. 
const routes = [ 
    { path: '/foo', component: Foo }, 
    { path: '/bar', component: Bar } 
] 

// 3. Create the router instance and pass the `routes` option 
// You can pass in additional options here, but let's 
// keep it simple for now. 
const router = new VueRouter({ 
    routes // short for `routes: routes` 
}) 

// 4. Create and mount the root instance. 
// Make sure to inject the router with the router option to make the 
// whole app router-aware. 
const app = new Vue({ 
    router: router 
}).$mount('#app')

出於某種原因，我不能看到所有的鏈接。我在控制檯中看到沒有錯誤。所有文件都正確包含在頁面中。

來源

2017-09-02 hidar

你Vue腳本包括應該來右邊的結束標記之前，不會在頭部區域。

<body> 
    <div id="app"> 
     <!-- Your Vue Components Here --> 
    </div> 

    <!-- Vue Scripts Here --> 
    <script src="../build/js/vue.min.js"></script> 
    <script src="../build/js/vue-router.min.js"></script> 
    <script src="../build/js/app.js"></script> 
</body>

來源

2017-09-03 00:40:44 Webber

仍然沒有工作，這裏是一個轉儲我的index.html的... https：//開頭引擎收錄.COM/tuGUNYgP – hidar

你vue.js腳本包括要來的結束標記結束前右 – Webber

現在，我得到錯誤「模板應該負責的狀態映射到用戶界面。避免將標籤與副作用你模板，如

我認爲它可能應用程序ID應該在div標記檢查您的腳本鏈接。

我試着codepen和它的工作，如果你想看看它

<div id="app"> 
    <div class='nav'> 
    <router-link to="/foo">foo</router-link> 
    <router-link to="/bar">bar</router-link> 
    <router-link to="/tar">tar</router-link> 
    </div> 


    <div class="content"> 
     <router-view></router-view> 
    </div> 
</div>

https://codepen.io/ResoGuy/pen/Jyzjxg

來源

2017-09-03 00:49:08

仍然沒有工作裏面，這裏是我的index.html ... https://pastebin.com/tuGUNYgP轉儲 – hidar

相關問題

無法獲取vuejs2和VUE路由器沒有工作在客戶端

回答

相關問題