Vue router

Vue router

by Saurabh Mimani

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.1.1/vue-router.js"></script>
<div id="app">
  <h1>Body</h1>
    <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

  <!-- use router-view element as route outlet -->
  <router-view>
  </router-view>
</div>

JavaScript

// Define some components
const Foo = {
  template: '  <div class="card row">\
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">\
  <ol class="carousel-indicators">\
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>\
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>\
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>\
  </ol>\
  <div class="carousel-inner" role="listbox">\
    <div class="carousel-item active">\
      <img src="https://www.hallaminternet.com/assets/URL-tagging-image.png" alt="First slide">\
    </div>\
    <div class="carousel-item">\
      <img src="http://www.shawacademy.com/blog/wp-content/uploads/2015/10/URL-1000x605.jpg" alt="Second slide">\
    </div>\
    <div class="carousel-item">\
      <img src="https://devcereal.com/wp-content/uploads/2016/05/URL-URI-URN-whats-difference.png" alt="Third slide">\
    </div>\
  </div>\
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">\
    <span class="icon-prev" aria-hidden="true"></span>\
    <span class="sr-only">Previous</span>\
  </a>\
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">\
    <span class="icon-next" aria-hidden="true"></span>\
    <span class="sr-only">Next</span>\
  </a>\
  </div>\
</div>',
  data: function() { return {  
  }}
};

const  Bar = {
  template: '<p>This is bar!</p>',
  data: function() { return {  
  }}
};


// Create a router instance.
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  mode: 'history',
    scrollBehavior: (to, from, savedPosition) => {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
    },
    routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
  ]
})

const app = new Vue({
  router
}).$mount('#app')