vue路由（一、二级路由）

是前台为了实现单页面应用然后设置路径，根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的

hash路由 默认的是hash路由

history路由

通过onhashchange()来检测路由的变化,根据不同的hash来显示不同元素。获取当前的hash值location.hash

通过onpopstate来检测history堆栈路径的变化，堆栈的路径是通过history.pushState(null, '',"?page=2")添加进去的

由hash路由设置成history路由，给路由添加配置项 mode="history"

1、设置相应组件

2、在router->index.js文件中添加配置

首先引入组件，然后配置规则 {path:设置路径，name:名，component:组件}

3、在需要现在组件的地方给页面添加<router-view></router-view>

4、设置导航路径

使用vue提供 <router-link to="路径"></router-link>默认的解析成a标签

5、设置默认路由

6、设置导航样式

1、需要定义组件

2、确定好在那个组件配置二级路由，就去那个组件的配置规则中添加children关键字，按照一级路由的配置方法配置规则

3、在需要配置二级路由的组件中添加router-view

4、设置导航 <router-link to="/ / ">

5、设置导航链接的样式

我们可以定义一个一级路由，里面可以包裹底部footer组件，让他为二级路由，这时点击底部的二级路由时，就会切换不同的页面，而不需要底部组件显示的时候，那我们在配置一个一级路由就好了！！！

1.导入vue-router.js文件，必须插入到vue.js文件后面

2.定义路由规则

4.将创建好的路由对象绑定到Vue实例上

5.修改URL哈希值

6.通过<router-view>渲染匹配的组件

7.css样式

<router-link>标签：Vue Router中提供专门用于设置哈希值的标签；

<router-view>标签：Vue Router中提供专门用于将路由匹配到的组件渲染到指定位置；

2.给router-link设置选中样式

默认情况下我们可以通过重写router-link -active类名来实现设置选中样式，但是我们也可以通过linkActiveClass来指定选中样式；

案例: 在one界面中又有两个按钮，通过这两个按钮进一步 切换one中的内容

可能是因为浏览器缓存了样式文件导致。

可以在css文件引用的末尾随便加个请求参数，如：main.css?v=201804091834，浏览器就以为是个新文件，然后从服务器重新下载该文件。

---