vue2.0路由的配置

app.vue

<template>  <div id="app">    <router-view></router-view><!--这里由于显示各个模块的内容-->    <div class="">        <router-link to="home">首页</router-link>        <router-link to="about">关于</router-link>    </div>    </div></template>

router-link的作用是跳转

index.js

import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home'import About from '@/components/About'Vue.use(Router)export default new Router({  routes: [    {      path: '/',//默认显示home      name: 'Home',      component: Home    },    {        path: '/home',        name:'Home',        component: Home    },    {        path: '/about',        name: 'About',        component: About    }  ]})

Home.vue

<template>  <div class="home">    <h1>Home</h1>  </div></template><script>export default {  name: 'home',  data () {  },}</script>

About.vue

<template>  <div class="about">    <h1>About</h1>  </div></template><script>export default {  name: 'about',  data () {  },}</script>

效果：