vue核心插件之一 vue-router

1 安装vue-router

1）官网上下载，通过src引入js文件

2）npm 安装

npm install vue-router

2 router实现跳转，这里通过构建vue项目

main.js主文件；

App.vue文件;

跳转的两个页面: hello.vue add HelloWorld.vue

路由配置文件index.js

1）main.js配置

引入相应的文件

a  路由配置

（1）定义路由；

（2）创建router实例，配置相关参数

 （4）创建和挂载根实例

b 一般我们将路由配置提取出来，放在router文件夹下，取名index.js

在index.js中配置路由： （1导入路由模块；2 注册路由；3创建路由实例，配置；4导出路由）

在main.js中导入，并注册到Vue实例中

2）App.vue

这里有两个新标签

router-link ，to 属性，相当于超链接a标签

router-view 所跳转的路由地址容器

3）hello 页面

3 运行项目，实现跳转

 

4 设置默认路由

（1）index.js中，路由配置参数redirect重定向

（2）设置选中路由的颜色

因为选中路由会默认添加属性.router-link-active{