路由配置主要有两种方法

1.路由直接在main.js中配置
main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
const router = new VueRouter({
	 mode:"history",
 	 routes:routes
})

new Vue({
	router,
  render: h => h(App)
}).$mount('#app')

router.js

//路由可以直接引入也可以先引入，然后用引入的名称代替
//第一种
import HelloWorld from '../../components/HelloWorld.vue'
import Home from '../../components/vpage/Home.vue'  
const routes = [
{ path:'/HelloWorld',name:'HelloWorld',component:HelloWorld },
{ path:'/home',name:'Home',component:Home }
]
export default routes


//第二种
import Home from ''  
const routes = [
{
	path: '/HelloWorld',
    name: 'HelloWorld',
 	component: () => import('../../components/HelloWorld.vue')
 }，
{
	path: '/home',
    name: 'Home',
 	component: () => import('../../components/vpage/Home.vue')
 }
]
export default routes

2.路由在router.js中配置 文件名不一定是router.js，只要是配置路由的文件就行
main.js

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/index/Home.vue'

Vue.use(VueRouter)

const routes =[
{
	path: '/HelloWorld',
    name: 'HelloWorld',
 	component: () => import('../../components/HelloWorld.vue')
 }，
{
	path: '/home',
    name: 'Home',
 	component: () => import('../../components/vpage/Home.vue')
 }
]
const router = new VueRouter({
  routes
})

export default router

3.引用组件跳转时别忘了<router-view ></router-view> 这个一定要有，他是跳转的地方展示内容的，如果没有就不不知道跳转的页面内容放在那了

如果以上配置都没有问题，那么需要查看一下package.json文件，查看router相关插件本版好是否对应。小编就是版本号不对应，vue是本版2，vue-router 是版本4 vuex是本版4，导致页面配置的路由内容不显示，就这么一个问题搞了三天