Vue路由router的使用步骤

1.引入路由模块

在src/main.js入口文件中引入相关模块及组件

2.安装路由依赖

3.新建目录

在src下新建个router目录，然后在里面新建个index.js文件，此时通过import router from './router’便可以识别里面的index.js文件
router目录下新建的index.js文件，这个文件负责写路由映射并导出，便于管理。

4.配置路由选项及渲染App组件（src/main.js入口文件）

5.引入路由模块并使用

6.创建路由，配置路由映射并导出（require读取模块）

如果使用const…require方法则下一步的components需要加s

如果使用import…from…读取模块则不使用components改为component（不加s）

7.配置路由映射

第一个对象为默认主页
其他为对象为错误自定义重定向路径，

8.导出路由配置

方法一：

方法二：

9.设置链接router-link

使用 router-link 组件来导航，通过传入 to 属性指定链接， 默认会被渲染成一个 <a> 标签

10.设置路由映射组件渲染router-view

路由链接router-link会被渲染成a链接，router-view要想显示对应a链接的页面组件信息，则需要router-view进行渲染展示

拓展：

点击链接，此时可以实现页面跳转，但会发现，URL里有#

在路由实例里配置，添加mode为history