好长时间没写项目了，都快忘光了，浅记一下。（我这项目没有登录页，项目运行直接看内容的那种）

我的目录结构，如图下：

1.安装路由插件后：npm install vue-router@3

2.在main.js中引入，如下图：

import Vue from 'vue'
import App from './App.vue'
import router from './router'  //引入router

Vue.config.productionTip = false
new Vue({
	router,//整个应用支持路由。
	render: h => h(App),
}).$mount('#app')

3.在app.vue中，写入需要跳转的页面链接，如下图：

<template>
 <div id="app">
 	<router-link to="/" exact>绘图曲线</router-link>
 	<router-link to="/parameter" exact>配置参数</router-link>
	<router-link to="/Simulation" exact>仿真场景</router-link>
	<router-link to="/TwoDimensional" exact>2D拓扑</router-link>
	<router-view/>
 </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style scope>
.title{
    text-align: center
}
a {
  display: inline-block;
  padding: 5px 10px;
  text-decoration: none;
  color: #0C9A9A;
}
.router-link-active {
  background: #000;
  color: white;
}
</style>

3.创建一个router文件夹，新建index.js文件

import Vue from 'vue';  //引入vue
import VueRouter from 'vue-router';  //引入vue-router
// import Index from '@/views/index'
import Curve from '@/views/curve/index'
import Parameter from '@/views/parameter/index'
import Simulation from '@/views/simulation/index'
import TwoDimensional from '@/views/twoDimensional/index'
//第三方库需要use一下才能用
Vue.use(VueRouter)
 
//定义routes路由的集合，数组类型
const routes = [
	{
        path: '/',
        name: 'Curve',
        component: Curve,
        meta: {
			title: '绘图曲线'
        },
    },{
        path: '/Parameter',
        name: 'Parameter',
        component: Parameter,
        meta: {
            title: '配置参数'
        },
    }, {
	        path: '/Simulation',
	        name: 'Simulation',
	        component: Simulation,
			meta: {
			    title: '仿真场景'
			},
	    }, {
	        path: '/TwoDimensional',
	        name: 'TwoDimensional',
	        component: TwoDimensional,
			meta: {
			    title: '2D拓扑'
			},
	    },
	]
 
//实例化 VueRouter 并将 routes 添加进去
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    next()
})
 
//抛出这个这个实例对象方便外部读取以及访问
export default router

4.实现的效果如下图：