vue路由

一、改变URL，但是页面不进行整体的刷新

1、URL的hash

URL的hash也就是锚点，本质上是改变window.location的href属性。 我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新。

2、HTML5的history

history.pushState({},'','home') history.pushState相当于栈的操作，先进后出，弹栈和入栈的操作。

history.pushState入栈；

history.back()出栈；

history.go(-1) 相当于 history.back()；

history.forward 相当于history.go(1)；

history.replaceState()：不能返回；

二、安装和使用vue-router

1、安装vue-router

npm install vue-router --save

2、在模块化中使用（通过Vue.use()来安装路由）

（1）导入路由对象，并且调用Vue.use(VueRouter)

（2）创建路由实例，并传入路由映射配置

（3）在Vue实例中挂载创建的路由实例

3、使用vue-router的步骤

（1）创建路由组件 （2）配置路由映射，组件和路径映射关系 （3）使用路由：通过<router-link>和<router-view>

4、router-link与router-view

<router-link>：该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签。 <router-view>：该标签会根据当前的路径，动态渲染出不同的组件。 网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等会和<router-view>处于同一个等级。 在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变。

三、router-link的其它属性补充

tag：tag可以指定router-link之后渲染成什么组件，比如<router-link tag='button'></router-link>，此时就是一个button了； replace：增加replace属性，就相当于replaceState； class：可以为标签增加样式，比如选中的会自动赋值router-link-active； active-class=“active”：选中的；也可以在router组件中配置linkActiveClass: 'active'；