A Quick example how to use routes and make your menu using vue.
<div id="app">
<routing></routing>
<div class="container pt-3 pb-3">
<router-view></router-view>
</div>
</div>
<script type="x-template" id="foo">
<div>
<h3>Foo</h3>
<div class="card">
<img class="card-img-top" src="https://images.unsplash.com/photo-1490323948794-cc6dde6e8f5b?dpr=1&auto=compress,format&fit=crop&w=1200&h=600&q=60&cs=tinysrgb&crop=" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<router-link :to="{name: 'nope'}" class="btn btn-primary">Go somewhere</router-link>
</div>
</div>
</div>
</script>
<script type="x-template" id="bar">
<div>
<h3>Pink banana</h3>
<div class="card">
<img class="card-img-top" src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?dpr=1&auto=compress,format&fit=crop&w=1200&h=600&q=60&cs=tinysrgb&crop=" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<router-link :to="{name: 'nope'}" class="btn btn-primary">Go somewhere</router-link>
</div>
</div>
</div>
</script>
<script type="x-template" id="nope">
<div class="jumbotron">
<h3>Nope</h3>
<p>Remember the route with no title, you can navigate to it!</p>
</div>
</script>
<script type="x-template" id="routing">
<nav class="navbar navbar-toggleable-md navbar-light bg-success navbar-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Vue (ab)use router</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" v-for="route in routes">
<router-link :to="route" class="nav-link" active-class="active">
{{ route.title }}
</router-link>
</li>
</ul>
</div>
</nav>
</script>
// 1. Define route components.
var Foo = {
template: '#foo'
};
var Bar = {
template: '#bar'
};
var Nope = {
template: '#nope'
};
Vue.component('routing', {
template: '#routing',
computed: {
routes: function () {
var routes = [];
for (var i in this.$router.options.routes) {
if (!this.$router.options.routes.hasOwnProperty(i)) {
continue
}
var route = this.$router.options.routes[i];
if(route.hasOwnProperty('title')) {
routes.push(route);
}
}
return routes;
}
}
});
// 2. Define some routes
var routes = [{
name: 'foo',
title: 'Foo fighter',
path: '/foo',
component: Foo
}, {
name: 'bar',
title: 'Bar stool',
path: '/bar',
component: Bar
}, {
name: 'nope',
path: '/nope',
component: Nope
}, {
path: '*',
redirect: {
name: 'foo'
}
}];
// 3. Create the router instance and pass the `routes` option
var router = new VueRouter({
routes // short for routes: routes
});
// 4. Create and mount the root instance.
var app = new Vue({
router
}).$mount('#app');
// Now the app has started!
#vuejs #javascript #vue-js