use*_*350 5 javascript vue.js vue-router
我正在尝试学习vue.js，但在使路由工作时遇到了问题。我想使用其他HTML文件中的模板，因此没有内联模板。
发生的事情是路由从未固定在我的页面上，并且我没有收到任何错误。我不知道如何进行这项工作，您能帮忙吗？
这是我的 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和about.html，因为它们只是一个段落，没有任何内容。
我该如何进行这项工作？而我不能使用导入，需求，任何节点/边框和其他东西是非常重要的，这是一个静态页面。
据我所知，你不能在路由配置中引用HTML文件，路由器不会为你加载这些文件。相反，您需要为每个路由指定一个组件，该组件可以带有自己的模板（请查看vue-router 文档）：
var routes = [{
path: '/home',
component: { template: '<div>home</div>' }
}, {
path: '/about',
component: { template: '<div>about</div>' }
}];
如果您不想将 HTML 模板直接放入 JS 代码中，可以按如下方式包含它们：
索引.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>
路线.js：
var routes = [{
path: '/home',
component: { template: '#home' }
}, {
path: '/about',
component: { template: '#about' }
}];
| 归档时间： |
|
| 查看次数： |
13783 次 |
| 最近记录： |