手搭路由 解析路由构造

• main.js

import Vue from 'vue'; // 引入vue
import router from './router';//引入路由配置   接口
import App from './App';

    new Vue({ //挂载
        el:'#app',
        router,//必须是router
        render:h=>h(App)
    })

• router>index.js

import Vue from 'vue';
import vueRouter from 'vue-router';     //需要下载vue-router
import index from '../views/index';    
    Vue.use(vueRouter);                 //挂载
    export default new vueRouter({
        mode:'hash', //默认是hash  还有 history
        routes:[{
            path:'/',
            component:index
        }]
    })

• App.vue

    <div class='wrap'>
        <router-view></router-view>                 //视图出口
        <router-link to='/'>首页</router-link>      //相当于a标签
    </div>

• views>index.vue

    <h1>凌晨两点半</h1>

• 目录

- router
      index.js
- views
     index.vue
  App.vue
  main.js