vue的roter使用

1在src下建立router文件夹，再建立router.js

import Vue from 'vue'
import Router from 'vue-router'
import home from '../components/home'
import page01 from '../components/page01'
import page02 from '../components/page02'
import page01A from '../components/page01/page01-A'
import page01B from '../components/page01/page01-b'
import pageEnd from '../components/page01/B/end'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/page01',
      name: 'page01',
      component: page01,
      children: [
        {
          path: 'page01-a',
          name: 'page01A',
          component: page01A
        },
        {
          path: 'page01-b',
          name: 'page01B',
          component: page01B,
          children: [
            {
              path: 'end',
              name: 'pageEnd',
              component: pageEnd
            }
          ]
        }
      ]
    },
    {
      path: '/page02',
      name: 'page02',
      component: page02
    }
  ]
})

2.第二步 设置main.js

import VueRouter from 'vue-router';
import router from './router/router';
Vue.use(VueRouter);
 
Vue.prototype.$goRoute = function (index) {
  this.$router.push(index)
}
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

第三步:写页面

<template>
  <div>
    <div>
      <ul>
        <li v-for="item in links"><a @click="$goRoute(item.route)">{{item.text}}</a></li>
      </ul>
      <router-view></router-view>
    </div>
  </div>
 
</template>
 
<script type="text/ecmascript-6">
  export default {
    name: 'app',
    data () {
      return {
        links: [
          {
            text: '胡萝卜',
            route: '/home'
          },
          {
            text: '大白菜',
            route: '/page01'
          },
          {
            text: '水蜜桃',
            route: '/page02'
          }
        ]
      }
    }
  }
</script>