问题：在前端路由中配置路由后再浏览器中无法显示组件中的内容的问题

问题：在前端路由中配置路由后再浏览器中无法显示组件中的内容的问题

####描述：再路由配置好后，执行服务器：

npm run dev

发现在命令提示界面不会出现报错，但是，在浏览器中无法出现给定的组件内容；

其中路由配置如下：

// 安装
Vue.use(VueRouter)

// Vuerouter
const routers = [
  {
    path: '',
    //重定向默认显示首页
    redirect: '/home'
  },
  {
    path: '/home',
    component: home
  }, {
    path: '/about',
    component: about
  }
]
const router = new VueRouter({
  routers,
  mode: 'history',
  linkActiveClass: 'active'
})

export default router

检查：问题出在routers处，初次在配置路由时，不太会在意单词问题。一般不报错而直接不显示，先检查一下自己的拼写是否出错了。

路由改为：

// 安装
Vue.use(VueRouter)

// Vuerouter
const routes = [ // 此处的单词一定为其“路由”的意思
  {
    path: '',
    //重定向默认显示首页
    redirect: '/home'
  },
  {
    path: '/home',
    component: home
  }, {
    path: '/about',
    component: about
  }
]
const router = new VueRouter({
  routes, // 此处的单词一定为其“路由”的意思
  mode: 'history',
  linkActiveClass: 'active'
})

export default router

router与route区别：

route
英 [ruːt] 美 [ruːt]
n.
路线;路途;(公共汽车和列车等的)常规路线，固定线路;途径;渠道
v.
按某路线发送

router
英 [ˈruːtə® , ˈraʊtə®] 美 [ˈruːtər , ˈraʊtər]
n.
路由器(传送信息的专用网络设备)
n.
槽刨

也即在调用路由器是使用router，在使用路由表定义是为route。

改后结果：