vue-router

两种方法引用component
redirect设置默认进入页面

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Index from '../src/home/index'
// import news from '../src/home/news'

Vue.use(VueRouter)
export default new VueRouter({
  routes: [
    {
      path: '/index',
      // component: 'Index',
      component: (resolve) => require(['@/home/index.vue'], resolve),
      name: '首页'
    },
    {
      path: '/news',
      component: (resolve) => require(['@/home/news.vue'], resolve),
      name: '新闻'
    },
    {
      path: '',
      redirect: '/index'
    }
  ]
})

router-link标签设置导航栏，to属性是对应router的path，tag可以定义标签类型，active-class可以设置选择样式，event设置监听事件类型。router-view是内容区域。

<template>
  <div>
    <div>
      <router-link to="/index" event="click" tag="span" active-class="actclass">首页</router-link>
      <router-link to="/news" event="click" tag="span" active-class="actclass">新闻</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'App'
  }
</script>
<style scoped>
  .actclass {
    font-weight: bold;
    background: #ccc;
    font-size: 16px;
    width: 60px;
    text-align: center;
    padding: 6px;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
  }
</style>