vue使用路由，创建项目时没有选择安装路由

1、安装路由

vue在创建项目的时候会让你选择时候需要路由，如果这里没有选择安装可以通过命令行

npm install vue-router -g

来安装路由，安装成功会提示版本，如下图

2、在src下面新建vue文件和router.js

页面写到vue文件里，router.js写路由相关的
如果是创建项目选的路由，那这里就不用新建router.js

//1、引入vue
import Vue from 'vue';
//2、引入vue-router
import VueRouter from 'vue-router';
//3、第三方库需要use一下才能用
Vue.use(VueRouter)
//4、引用page1页面,引用page2页面,这里带着（.vue）
import page1  from './page1.vue';
import page2  from './page2.vue';
//5、定义routes路由的集合，数组类型
// 这个数组也可以自定义名称，在第6u步的时候要添加进去
const routes=[
    //单个路由均为对象类型，path代表的是路径，component代表组件
    {path:'/page1',component:page1},
    {path:"/page2",component:page2}
    //可以配置重定向,
    {path:'',redirect:"page1"}
    //或者重新写个路径为空的路由
    {path:"",component:page1}
]

//6、实例化VueRouter并将routes添加进去
const router=new VueRouter({
//ES6简写，等于routes：routes
    routes
});

//7、抛出这个这个实例对象方便外部读取以及访问
export default router

最后5,6,7步可以合并

//5、定义routes路由的集合，数组类型
const constantRouterMap = [
   //单个路由均为对象类型，path代表的是路径，component代表组件
    {path:'/page1',component:page1},
    {path:"/page2",component:page2}
     //可以配置重定向,
    {path:'',redirect:"page1"}
    //或者重新写个路径为空的路由
    {path:"",component:page1}
];
//6,7合并：将routes添加进去，抛出这个这个实例对象
export default new Router({
  routes: constantRouterMap
});

补充一点路由重定向的知识
重定向实际上是当匹配到路径符合条件的时候去执行对应的路由，当然这个时候的url上面的地址显示的是对应的路由，页面也是对应的路由页面；
重新配置路由是当匹配到路径符合条件的时候，router-view页面展示部分负责拿符合条件路由的页面来展示，实际上url是没有发生变化的；

3、修改一下main.js

import Vue from 'vue'
import App from './App'
//1、引用router.js
import router from './router.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
//2、一定要注入到vue的实例对象上
  router,
  components: { App },
  template: '<App/>'
})

4、修改App.vue部分

<template>
  <div id="app">
   
    <div>
//1、router-link定义页面中点击触发部分　　
      <router-link to="/page1">Page1</router-link>
      <router-link to="/page2">Page2</router-link>
    </div>
//2、router-view定义页面中显示部分
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

这样访问端口就可以展示路由页面了