Getting started with vue router

Vue itself is oriented to a single page, but in many cases the main function is placed in main.vue. For login, router can be considered at this time. Router provides the possibility of switching multiple pages under the Vue framework.

basic configuration:

App.view

<template>
  <div id="App">
    <router-view></router-view>
  </div>
</template>
<script>


  export default {
    name: 'App',
    created (){
      //默认切换到登录页
      this.$router.push('./login')
    }
  }
</script>

The route renders the corresponding node to the router-view node

main.js

new Vue({
  store,
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
})

main.js goes into router.js file

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../components/main/Main.vue'
import Login from  '../components/login/Login.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/main',
      name: 'Main',
      component: Main
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
  ]
})

Just register the vue file and title corresponding to the route

usage:

this.$router.push('./login')

fairly simple configuration