Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ktquez/bb27d72aba9c3c4e728a82fac3e548b2 to your computer and use it in GitHub Desktop.
Save ktquez/bb27d72aba9c3c4e728a82fac3e548b2 to your computer and use it in GitHub Desktop.
Basic Vue Router Example
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Vue Router Example</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a v-link="/">Dashboard</a></li>
<li><a v-link="/about">About</a></li>
<li><a v-link="/contact">Contact</a></li>
<li><a v-link="/404">404</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<router-view></router-view>
</div>
</div>
// Tell Vue to use view-router
Vue.use(VueRouter)
// Router options
var router = new VueRouter({
history: false
})
// Router map for defining components
// You can use template: require('/path/to/component.html')
router.map({
// For Not Found template
'*': {
component: {
template: '<h1>Not Found</h1>'
}
},
'/': {
component: {
template:
'<div class="jumbotron">' +
'<h1>Dashboard</h1>' +
'<p>This is dashboard</p>' +
'<p>' +
'<a v-link="/dashboard/subroute" class="btn btn-lg btn-primary" role="button">View SubRoute</a>' +
'</p>' +
'</div>' +
// To show nested subroute
'<router-view></router-view>'
},
// Defining Subroutes
subRoutes: {
'/subroute': {
component: {
template:
'<h1>Navbar example</h1>' +
'<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>' +
'<p>To see the difference between static and fixed top navbars, just scroll.</p>'
}
}
}
},
'/about': {
component: {
template:
'<div class="jumbotron">' +
'<h1>About</h1>' +
'<p>This is about page</p>' +
'<p>' +
'<a v-link="/about/subroute" class="btn btn-lg btn-primary" role="button">View SubRoute</a>' +
'</p>' +
'</div>' +
'<router-view></router-view>'
},
subRoutes: {
'/subroute': {
component: {
template:
'<h1>Navbar example</h1>' +
'<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>' +
'<p>To see the difference between static and fixed top navbars, just scroll.</p>'
}
}
}
},
'/contact': {
component: {
template:
'<div class="jumbotron">' +
'<h1>Contact</h1>' +
'<p>This is contact page</p>' +
'</div>'
}
}
});
var App = Vue.extend()
router.start(App, '#app')
<script src="https://rawgit.com/yyx990803/vue/0.12.8/dist/vue.min.js"></script>
<script src="https://rawgit.com/michaeljcalkins/vue-router/master/dist/vue-router.min.js"></script>
a:hover {
cursor: pointer;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment