后端路由与前端路由

1. 后端路由：应用程序如何去处理不同的url地址发送过来的请求。
2. 前端路由：不同的url地址要渲染不同的页面效果出来。
3. 后端路由与前端路由最本质的一个区别：前端路由只处理 GET 请求。

vueRouter

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

1. 嵌套的路由/视图表
2. 模块化的、基于组件的路由配置
3. 路由参数、查询、通配符
4. 基于 Vue.js 过渡系统的视图过渡效果
5. 细粒度的导航控制
6. 带有自动激活的 CSS class 的链接
7. HTML5 历史模式或 hash 模式，在 IE9 中自动降级
8. 自定义的滚动条行为

使用vueRouter

1. 在 Vue 核心之后引入 VueRouter
2. 准备路由页面组件（跟路由相关的组件，就叫做路由页面组件）

components: {
	home: {
	   template: `<h1>home</h1>`,
	}
	...多个
}

1. 定义路由的规则 routes ，是一个数组对象

const routes = [
        // 一个对象就是一条路由规则
        {
          // 每一条规则有一些配置项，主要的是 path 和 component
          // path - 路由url地址，一般是#号后面的部分
          // component 使用哪个路由页面组件去渲染，
          // 不能是组件名字的字符串
          // 可以直接提供一个包含组件配置项的对象即可
          // name 推荐任何组件都设置一个 name 的选项这个选项就是给组件取个名字
          path: "/home",
          name: "home",
          component: home,
        }
        ...多个
]

1. 实例化路由对象, 使用new VueRouter()生成一个 router 实例

const router = new VueRouter({
	routes,
});

1. 实例化Vue根组件时，也就是 new Vue() 的时候，需要配置 router 选项，选型的值 就是上一个步骤中生成VueRouter的实例

new Vue({
// 配置一个 router 选项
 router,
});

1. 需要在某个位置，放置一个 路由视图（路由坑，就是用来填充匹配的路由页面组件的一个东西），路由视图本身是 VueRouter 提供的一个全局的组件 router-view 这时url地址与某个路由规则匹配时，就会将相应的路由页面组件渲染到这个 router-view 上

    <div id="app">
      <router-view></router-view>
    </div>

路由模式

Vue 中 路由有两种不同的模式

1. hash 模式 （默认模式）
   使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

2. hisotry 模式
   history模式是基于最新的HTML5里面history相关的api进行的一些操作。不过这种模式要玩好，还需要后台配置支持不然会出现404找不到页面这种问题。history模式时，重定向会有些问题，需要页面的名字叫index.html才行。history模式只能兼容到IE10及以上。

3. 在 new VueRouter() 的时候，配置 mode 选项就可以切换模式

const router = new VueRouter({
	// 路由模式，只能从 hash 与 history 中选择一个
	mode: "history",
    routes
});

声明式导航 (用 router-link 来控制路由跳转)

与 router-view 一样，都是引入了 vue-router 之后，提供的全局组件
router-link 的作用就是实现路由的跳转（url的跳转）它本质上就是一个a标签。我们推荐使用它，而不是去用a标签来跳转。
语法：

<router-link to="/home">home</router-link>
to 属性是必须的用来设置点击时跳转到哪里

使用 router-link 就不需要去写 # 号了，它会根据当前路由的模式来决定最终渲染出去的a标签的href属性有没有 # 号。
默认情况下当前的路由地址与某个router-link的to属性匹配时，会给渲染出去的a元素添加上两个 class ，可以使用这两个中的任意一个操作css 样式，这能够更方便的去实现高亮效果。

1. router-link-exact-active
2. router-link-active

也可以设置 router-link 组件的 active-class 属性，属性值为某个class名字

1. 希望默认的 router-link-active => active
   active-class=“active”
2. 希望默认的 router-link-exact-active => exact-active
   exact-active-class=“exact-active”

编程式导航 (用js控制路由跳转)

$router

使用 vue-router 之后，在 vue 的原型上提供了一个 $router 对象， 使用这个对象的一些方法来进行路由的跳转。

1. this.$router.push()
   就相当于普通的 router-link 它的参数可以是：

   1. 字符串，要跳转到路由的path
   2. 对象，对象中配置 path 属性。

2. this.$router.replace()
   就相当于带有 replace 属性 的 router-link 它的参数可以是：
   1. 字符串，要跳转到路由的path
   2. 对象，对象中配置 path 属性。

其余的一些方法

this.$router.back()    =>     后退  history.back()
this.$router.go(num)   =>  前进或后退，根据传递参数是正数还是负数来决定 history.go()
this.$router.forward() =>    前进  history.forward()

push() 与 replace() 和 router-link 上的 to 属性，传递为对象时，对象有哪些属性：

• path
  路由重定向
• name
  路由别名
• query
  query 参数
• params
  params 参数
  params 与 path 会产生冲突，请使用 name 和 params 结合使用
• meta
  路由元信息