【20190901】Vuejs router

1. 安装 vue-router

npm install --save vue-router

1. ，main.js中添加以下代码

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
Vue.use(VueRouter);
Vue.config.productionTip = false
const Routers = [
  {
    path:'/index',
    component:(resolve) => require(['./components/index.vue'],resolve)
  },
  {
    path:'/about',
    component:(resolve) => require(['./components/about.vue'],resolve)
  },
  {
    path:'*',
    redirect:'/index'
  }
]
const RouterConfig = {
  mode:'history',
  routes:Routers
}
const router = new VueRouter(RouterConfig)
new Vue({  
  el:'#app',
  router:router,
  render: h => h(App),
}).$mount('#app')

1. 分别创建2个component文件

//about.vue
<template>
    <div>123a</div>
</template>
<script>
export default {
}
</script>
//index.vue
<template>
    <div>11322</div>
</template>
<script>
export default {
}
</script>

1. app.vue中添加路由占位符

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
}
</script>