Basic Vue Router Example

Basic Vue Router Example.md

Basic Vue Router Example

Basic Vue Router Example using Official Vue Router plugin

A Pen by Swapnil Bhavsar on CodePen.

License.

index.html

<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>

script.js

// 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')

scripts

<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>

style.css

a:hover {
  cursor: pointer;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />