基本路由

/*
路由器模块
 */

// 引入Vue
import Vue from ‘vue‘

// 引入路由器插件
import VueRouter from ‘vue-router‘

// 引入路由组件
import About from ‘../views/About‘
import Home from ‘../views/Home‘

// 声明使用路由器插件
Vue.use(VueRouter)

// 向外暴露路由器对象。这里为默认暴露，则引入的时候可使用任何名字
export default new VueRouter({
  // 配置N个路由
  // path指定路由地址
  // component指定路由地址对应的路由组件
  // redirect重定向到某个路由
  routes: [
    {
      path: ‘/about‘,
      component: About
    },
    {
      path: ‘/home‘,
      component: Home
    },
    {
      // 访问项目根路径时重定向到/about路由
      path: ‘/‘,
      redirect: ‘/about‘
    }
  ]
})

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘

// 引入路由器
// 这里没有具体指定到index.js是因为如下写法会默认找/router/index.js
import router from ‘./router‘

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  components: { App },
  template: ‘<App/>‘,
  router // 配置路由器
})

<div class="list-group">
    <!--生成路由链接,to指定路由链接的path-->
    <router-link to="/about" class="list-group-item">About</router-link>
    <router-link to="/home" class="list-group-item">Home</router-link>
</div>

<div class="panel-body">
    <!--显示当前路由链接对应的组件-->
    <router-view></router-view>
</div>