vue路由入门使用javascriptyh604005215的博客-

后端路由与前端路由

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>`, } ...多个 } 

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

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

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

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

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

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

6. 需要在某个位置，放置一个 路由视图（路由坑，就是用来填充匹配的路由页面组件的一个东西），路由视图本身是 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
  路由元信息