2017-09-02 12 views
0

私のページにvuejsとvue routerを含め、ルータとvueを初期化するためにapp.jsを作成しましたが、ルーティングは機能しません。クライアントでvuejs2とvue-routerを稼働させることができません

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

<!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で、これはコードの簡易版である<router-link to="/foo"> foo </router-link>

として内部定義されたリンクを参照してください。何らかの理由で

、私はリンクを全く見ることができません。コンソールにエラーは表示されません。すべてのファイルがページに正しく含まれています。

答えて

1

あなたのVueスクリプトは、頭の領域ではなく、閉じたbodyタグの直前に来る必要があります。

<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> 
+0

まだ働いていない、ここでのダンプがある私のindex.htmlを... HTTPSを見たい場合は働いた://ペーストビン.com/tuGUNYgP – hidar

+0

あなたのvue.jsスクリプトは、閉じるボディータグの最後の前に来るべきです – Webber

+0

これで、「テンプレートはUIに状態をマッピングする責任しか負いません。

1

私はそれはおそらくアプリ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

+0

の内部にあります。まだ動作していません。ここに、私のindex.htmlのダンプがあります。https://pastebin.com/tuGUNYgP – hidar

関連する問題