Vue.js路由到不工作的頁面

我正在嘗試學習vue.js，並且遇到了使路由工作出現問題的情況。我想使用其他html文件內的模板，所以沒有內聯模板。Vue.js路由到不工作的頁面

發生什麼事是路由從不固定到我的頁面，我收到沒有錯誤。我不知道如何使這項工作，你能幫忙嗎？

這是我index.html

<!DOCTYPE html> 
<html xmlns:v-bind="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <script src="assets/js/vue.js"></script> 
    <script src="assets/js/vue-router.js"></script> 
    <script src="js/routes.js"></script> 
</head> 
<body> 
<div id="app"> 
    <router-link to="/home">Go to home</router-link> 
    <router-link to="/about">Go to about</router-link> 
    <router-view></router-view> 
</div> 
<script src="js/app.js"></script> 
</body> 
</html>

這是routes.js

var routes = [ 
{ 
    path: '/home', 
    template: 'pages/home.html' 
}, 
{ 
    path: '/about', 
    template: 'pages/about.html' 
} 
];

，這是我app.js

const router = new VueRouter({ 
    routes // short for routes: routes 
}); 

const app = new Vue({ 
    el: '#app', 
    router: router 
});

我不會粘貼我home.html的約。 HTML，因爲它們只是一個沒有任何內容的段落。

我該如何做這項工作？什麼是極其重要我不能使用導入，要求，任何節點/巴貝爾和東西，這是一個靜態頁面。

來源

2016-11-11 user3212350

你要鏈接實際上VUE模板的頁面還是你只是需要路由器的？ – retrograde

據我所知，你不能在路由配置中引用HTML文件，路由器不會爲你加載這些文件。相反，你需要爲每個可以帶來自己的模板路徑組件（具有看看vue-router documentation）：

var routes = [{ 
    path: '/home', 
    component: { template: '<div>home</div>' } 
}, { 
    path: '/about', 
    component: { template: '<div>about</div>' } 
}];

如果你不想把HTML模板直接進入你的JS代碼，你可以把它們作爲如下：

的index.html：

<script type="x-template" id="home"> 
    <div>home</div> 
</script> 
<script type="x-template" id="about"> 
    <div>about</div> 
</script> 
<script src="js/app.js"></script>

routes.js：

var routes = [{ 
    path: '/home', 
    component: { template: '#home' } 
}, { 
    path: '/about', 
    component: { template: '#about' } 
}];

來源

2016-11-11 23:44:10 Aletheios

有2個問題，你的代碼

您使用不正確的語法 - 你需要用模板標籤內組件的路徑配置
不能包括在你所採取的方式HTML文件。 Vue.js不會自動加載它們。

看看這個：

const routes = [ 
 
{ 
 
    path: '/home', 
 
    component: { 
 
     template: "<div>home</div>" 
 
    } 
 
}, 
 
{ 
 
    path: '/about', 
 
    component: { 
 
     template: "<div>about</div>" 
 
    } 
 
} 
 
]; 
 

 
const router = new VueRouter({routes}); 
 

 
const app = new Vue({ 
 
    el: '#app', 
 
    router: router 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script> 
 

 
<div id="app"> 
 
    <router-link to="/home">Go to home</router-link> 
 
    <router-link to="/about">Go to about</router-link> 
 
    <router-view></router-view> 
 
</div>

來源

2016-11-11 23:54:38 damienix

Vue.js路由到不工作的頁面

回答

相關問題