官网地址

https://router.vuejs.org/zh-cn/

准备工作：

a、main.js添加路由文件,并挂接在实例内
import router from './router/index'
b、index.js添加组件,并设置路由
import Code from '../components/Code'
import Slide from '../components/Slide'

第 1 步

在App.vue文件内添加以下代码，用于展示路由对应的组件内容
<route-component></route-component>
<router-view></router-view>

第 2 步

导入Router.vue文件,并挂接到组件上
import RouteComponent from './components/Router.vue'
components: { RouteComponent }

第 3 步

在Router.vue文件内拼接router-link
<router-link :to="i.path" :name="i.name">{{ i.name }}</router-link>

第 4 步

在Code.vue中添加组件内容
<p @click="showName">this is show a demo : {{ name }}</p>

项目代码有详细解释，在此是把大体思路捋一遍

https://github.com/DINLiang/vue-demo