I'm trying to learn vue.js and I have a problem with making routing work. I want to use templates, which are inside other html files, so no inline templates.
What happens is routing is never pinned to my page and I receive no error. I have no clue how to make this work, can you help?
This is my index.html
<!DOCTYPE html>
<html xmlns:v-bind="">
<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>
This is routes.js
var routes = [
{
path: '/home',
template: 'pages/home.html'
},
{
path: '/about',
template: 'pages/about.html'
}
];
and this is my app.js
const router = new VueRouter({
routes // short for routes: routes
});
const app = new Vue({
el: '#app',
router: router
});
I won't be pasting my home.html and about.html because they're just one paragraph without anything.
How can I make this work? And what is extremely important I cannot use imports, requires, anything node/babel and stuff, this is a static page.
I'm trying to learn vue.js and I have a problem with making routing work. I want to use templates, which are inside other html files, so no inline templates.
What happens is routing is never pinned to my page and I receive no error. I have no clue how to make this work, can you help?
This is my index.html
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3/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>
This is routes.js
var routes = [
{
path: '/home',
template: 'pages/home.html'
},
{
path: '/about',
template: 'pages/about.html'
}
];
and this is my app.js
const router = new VueRouter({
routes // short for routes: routes
});
const app = new Vue({
el: '#app',
router: router
});
I won't be pasting my home.html and about.html because they're just one paragraph without anything.
How can I make this work? And what is extremely important I cannot use imports, requires, anything node/babel and stuff, this is a static page.
Share Improve this question asked Nov 11, 2016 at 14:47 user3212350user3212350 4011 gold badge6 silver badges19 bronze badges 1- Are the pages you are linking actually vue templates or are you just in need of the router? – retrograde Commented Nov 11, 2016 at 18:53
2 Answers
Reset to default 1As far as I know, you can't reference HTML files in the route configuration, the router won't load these files for you. Instead, you need to specify a ponent for each route which can bring its own template (have a look at the vue-router documentation):
var routes = [{
path: '/home',
ponent: { template: '<div>home</div>' }
}, {
path: '/about',
ponent: { template: '<div>about</div>' }
}];
If you don't want to put the HTML templates directly into your JS code, you can include them as follows:
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',
ponent: { template: '#home' }
}, {
path: '/about',
ponent: { template: '#about' }
}];
There are 2 problems with your code
- You used incorrect syntax - you need to wrap template tag inside ponent in the routes config
- You cannot include html files in the way you did it. Vue.js will not load them automagically.
Check out this:
const routes = [
{
path: '/home',
ponent: {
template: "<div>home</div>"
}
},
{
path: '/about',
ponent: {
template: "<div>about</div>"
}
}
];
const router = new VueRouter({routes});
const app = new Vue({
el: '#app',
router: router
})<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.0.5/vue.js"></script>
<script src="https://cdnjs.cloudflare./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>