简单说说如何使用vue-router插件的方法

刷新页面之后，就会在调试模式看到 chunk 名称已经被改变咯：

在 RouterConfig 中，我们使用了  HTML5 的 History 路由模式，即通过 “/” 来设置路径。如果不配置 mode，RouterConfig 默认是使用 “#” （锚点）来匹配路径。

注意： 生产环境中，服务端必须将所有路由都指向同一个 HTML，或设置 404 页面为这个 HTML 页面，否则刷新页面就会出现 404 错误。

2.3 配置 chunk 样式

使用了 chunk 之后，每个 *.vue 文件中所定义的样式，默认通过 Javascript 来动态创建 <style> 标签来写入样式。我们可以通过配置，把这些文件中的样式都统一写入 main.css，修改 webpack.config.js ：

 plugins: [//插件
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true
    }),
   ...
  ]

2.4 配置 History 路由指令

在 package.json 中，修改 dev 指令：

"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",

2.5 挂载路由组件

在根实例，挂载路由组件：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

运行时，<router-view> 会根据当前所配置的路由规则，渲染出不同的页面组件。主界面中的公共部分，比如侧边栏、导航栏以及底部版权信息栏，可以直接定义在根目录，与<router-view> 同级。这样，当切换路由时，切换的只是<router-view> 挂载的组件，其它内容不会变化。

2.6 运行

执行 npm run dev 之后，在浏览器地址栏输入不同的 URL ，就会看到挂载的不同组件信息。
http://localhost:8080/index：

http://localhost:8080/about：

2.7 重定向

我们可以在路由配置表中，配置一项功能，当访问的页面不存在时，重定向到首页：

const Routers = [
...
  {//当访问的页面不存在时，重定向到首页
    path: '*',
    redirect: '/index'
  }
]

这样，即使只访问 http://localhost:8080/，也会自动跳转到首页啦 O(∩_∩)O~

2.8 带参数的路由

路由 path 可以带参数。比如文章 URL，路由的前半部分是固定的，后半部分是动态参数，形如：/article/xxx。它们会被路由到同一个页面，在该页面可以获取 xxx 参数，然后根据这个参数来请求数据。