Vue Router

Trying the basic vue router without every fancy cli just pure javascript

by Jay Angelo Valmocina

HTML

<html>

  <head>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>

  <body>
    <div id="app">
     <nav>
        <div class="nav-wrapper nav-color">
  
          <ul id="nav-mobile" class="left">
            <li>
              <router-link to="/home">Home</router-link>
            </li>
            <li>
              <router-link to="/search">Search</router-link>
            </li>
          
          </ul>
        </div>
      </nav>
      <router-view></router-view>
    </div>
  </body>

  <template id="home-template">
    <div class="container">
      <div class="card">
        <div class="card-content">
          Welcome home.
        </div>
      </div>
    </div>
  </template>

  <template id="search-template">
    <div class="container">
      <div class="card">
        <div class="card-content">
          Search. We got everything you want.
        </div>
      </div>
    </div>
  </template>
  	
  <template id="login-template">
     <div class="container">
      <div class="card">
        <div class="card-content">
        Please login with your credentials.
          <div class="input-field">
          		 <input type="text" placeholder="username"/>
          </div>
          <div class="input-field">
          		<button @click="login()" class="btn btn-md">Login</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script type="text/x-template" >
  	
  </script>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Thasadith');
* {
  font-family: 'Thasadith', sans-serif;
  font-size: 30px;
}

.nav-color {
  
  background-image: linear-gradient(to right, #051937, #33265c, #6e2a75, #ae217c, #eb1270);
}

JavaScript

const Home = {
	    template: '#home-template'
	  }
	  const Search = {
	    template: "#search-template"
	  }
    
    const Login = { template: "#login-template"}

	  const routes = [
    {
	      path: '/',
	      name: 'home',
	      component: Home,
	    },
      {
      		path: "/login",
          name: "login",
          component: Login
		  },
      {
        path: "/home",
        name: "home",
        component: Home
      },
	    {
	      path: '/search',
        name: "search",
	      component: Search
	    }
	  ]
	  const router = new VueRouter({
	    routes
	  })

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

	  new Vue({
	    methods: {
	      goBack() {
	        window.history.length > 1 ?
	          this.$router.go(-1) :
	          this.$router.push('/')
	      },
     
	    }
	  })