Installation and use of vue-router routing vue

1. Install, cnpm install vue-router case if you do not choose when creating the project

2. Suppose App root assembly, and two custom components list home

 main.js in operation

Vue from Import 'VUE' 
Import from the App './App.vue' 
// introduced routes 
Import from VueRouter 'VUE-Router' 

Vue.use (VueRouter) 

// introduction means 
Import from Home './components/Home' 
Import List from './components/List' 

// configure routing 
const routes = [ 
  {path: '/ Home', Component: Home}, 
  {path: '/ List', Component: List}, 
  {path: '*', the redirect : '/ home'} / * default route skip * / 
] 

// instantiate routing 
const = new new Router VueRouter ({ 
  routes // (abbreviation) corresponds routes: routes 
}) 

new new Vue ({ 
  EL: '#app' , 
  Router, routing // mount 
  the render: H => H (the App) 
})

 app components

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/list">列表</router-link>

    <!--放置路由-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

home

<template>
  <div>
    home组件
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>

effect