一:效果

二:实现vue-router

本教程都采取模块化机制开发，所以需要一个简单的工程；本教程目录可去github下载搭建一个极简的vue开发环境,包括了详细的搭建文档；当然也可以直接下载vue脚手架，学习本节的内容

1.安装vue-router

                                            
npm install --save vue-router
                                            
                                        

2.引入Vue-Router

                                            
import VueRouter from 'vue-router'
                                            
                                        

3.注册VueRouter

                                            
Vue.use(VueRouter);
                                            
                                        

4.实例化VueRouter;实例化VueRouter(这里注意 实例化的路由名称只能是router)，需要一个参数，而这个参数就是需要我们自定义的路由对象

                                            
//实例化路由对象之前先 定义一个路由数组
// 1. 定义组件。
const home = { template: '<div>home</div>' }
const about = { template: '<div>about</div>' }
// 2. 定义路由
const routesobj = [
    { path: '/home', component: home },
    { path: '/about', component: about }
]

//实例化路由对象
let router=new VueRouter({
    routes:routesobj
});
                                            
                                        

5.在根对象注入router

                                            
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<app />'
})
                                            
                                        

6.加载路由，确定路由渲染位置

                                            
<template>
    <div class="app">
        <h1>welcome to xiaobai </h1>
        <router-link to='/'>首页</router-link>
        <router-link to='/about'>关于</router-link>
        <router-view></router-view>  //路由指向的组件内容，渲染到这里
    </div>
</template>
                                            
                                        

三:全部代码 (https://github.com/popstarqq/VUE/tree/master/Demo2 Vue-Router)

                                            
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './APP.vue'

Vue.use(VueRouter);
// 1. 定义组件。
const home = { template: '<div>home</div>' }
const about = { template: '<div>about</div>' }

// 2. 定义路由
const routesobj = [
    { path: '/', component: home },
    { path: '/about', component: about }
]

const router=new VueRouter({
  routes:routesobj
});

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})