Menu
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.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>
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.
759
Plain Vue. To send the user to an external page, you just have to put in a different URL: window. location.
Step 1: Vue Router can be installed through Npm with the package named vue-router using below command. It can be used via a script tag as shown below. Step 2: Create our Vue project using the following command. Step 3: After creating our project we will add our Vue router using the following command.
Note: Inside of a Vue instance, you have access to the router instance as $router . You can therefore call this.$router.push . To navigate to a different URL, use router.push . This method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.
As 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 component for each route which can bring its own template (have a look at the vue-router documentation):
var routes = [{
path: '/home',
component: { template: '<div>home</div>' }
}, {
path: '/about',
component: { 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',
component: { template: '#home' }
}, {
path: '/about',
component: { template: '#about' }
}];
There are 2 problems with your code
Check out this:
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
