首先，通过 npm 安装 vue-router 插件：
npm install --save vue-router
安装的插件版本是：vue-router@3.0.2
2 用法
2.1 新建 vue 组件
在 router 目录中，新建 views 目录，然后新建两个 vue 组件（一个页面就对应一个组件）。
index.vue：
<template> <div>首页</div> </template> <script> export default { name: "index.vue" } </script> <style scoped> </style>
about.vue：
<template> <div>关于我们</div> </template> <script> export default { name: "about" } </script> <style scoped> </style>
2.2 修改 main.js
// 引入 Vue 框架 import Vue from 'vue' import VueRouter from 'vue-router'; //引入 hello.vue 组件 import Hello from './hello.vue' //加载 vue-router 插件 Vue.use(VueRouter); /*定义路由匹配表*/ const Routers = [{ path: '/index', component: (resolve) => require(['./router/views/index.vue'], resolve) }, { path: '/about', component: (resolve) => require(['./router/views/about.vue'], resolve) }] //路由配置 const RouterConfig = { //使用 HTML5 的 History 路由模式 mode: 'history', routes: Routers }; //路由实例 const router = new VueRouter(RouterConfig); new Vue({ el: '#app', router: router, render: h => h(Hello) })
步骤如下：
加载 vue-router 插件。
定义路由匹配表，每个路由映射到一个组件。
配置路由。
新建路由实例。
在 Vue 实例中引用路由实例。
Routers 中的每一项，都有以下这些属性：
属性
说明
path
匹配路径
component
需要映射的组件
webpack 把每一个路由都打包成一个 js 文件。只有在请求该页面时，才会加载这个 js 文件，即按需加载。
如果需要一次性加载，那么可以这样配置：
{ path: '/index', component: require('./router/views/index.vue') }
配置了异步路由之后，编译出的页面 js 被称为 chunk，它们默认的命名格式为 0.main.js、1.main.js 等等。
可以在 webpack.config.js 中配置这个 chunk 的命名格式：
output: { ... //chunk 文件名 chunkFilename:'[name].chunk.js' }
刷新页面之后，就会在调试模式看到 chunk 名称已经被改变咯：
在 RouterConfig 中，我们使用了 HTML5 的 History 路由模式，即通过 "https://www.jb51.net/" 来设置路径。如果不配置 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 ，就会看到挂载的不同组件信息。
:8080/index：
2.7 重定向
我们可以在路由配置表中，配置一项功能，当访问的页面不存在时，重定向到首页：
const Routers = [ ... {//当访问的页面不存在时，重定向到首页 path: '*', redirect: '/index' } ]
这样，即使只访问 :8080/，也会自动跳转到首页啦 O(∩_∩)O~
2.8 带参数的路由