VueRouter实例不响应，配置后访问/about路径无法加载对应组件求助

问题原因 #

你创建VueRouter实例时配置项的键名写错了，VueRouter要求路由规则数组对应的配置键是复数的routes，你误写为单数的route，导致定义的路由规则没有被注册，所以所有路径都匹配不到组件。

修复步骤 #

1. 修改main.js中的配置
   你可以选择两种修改方式，推荐第一种符合官方命名惯例：

• 方式1：将路由规则数组命名为routes，再传入配置

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import About from './components/About';
Vue.use(VueRouter);
// 数组名改为复数routes
const routes = [
  {path:'/about',component: About}
];
const router = new VueRouter({
  // 配置键和数组名一致，为routes
  routes
  // 如果要去掉URL中的#，可以加下面这行配置开启history模式
  // mode: 'history'
});
Vue.config.productionTip = false

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

• 方式2：保持现有数组名不变，修改配置键为routes

const route = [
  {path:'/about',component: About}
];
const router = new VueRouter({
  routes: route
});

2. 访问对应路径验证

• 默认hash模式下，访问地址为：http://localhost:8080/#/about即可看到About页面内容
• 如果你开启了history模式，访问地址为：http://localhost:8080/about

修改完成后重启本地开发服务即可生效。

内容的提问来源于stack exchange，提问作者enamul haque