# Vue Router

# 路由简介

传统的路由指的是：当用户访问一个 url 时，对应的服务器会接收这个请求，然后解析 url 中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发。
而前端路由是不涉及服务器的，是前端利用 hash 或者 HTML5 的 history API 来模拟实现的，一般用于不同内容的展示和切换。
目前 Vue 推荐单页面应用 SPA 开发模式，大型单页应用最显著特点之一就是采用前端路由系统，通过改变 URL，在不重新请求页面的情况下，更新页面视图。Vue 中的路由解决方案为 vue-router。

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。我们用 vue-cli 开发的项目就是单页面应用。 vue 路由能实现哪些功能

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

# 路由安装

我们在 vue-cli 创建项目的时候就默认安装路由

# 手动安装 vue 路由

这一步是安装路由保存到我们 package.json 里面的 dependencies 里面

npm install vue-router --save

# 路由起步

配置路由文件

在 main.js 的同级目录新建一个 router 的文件夹(这个文件夹存放的是我们路由的配置文件)
在这个文件夹下创建 index.js 里面写上

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
// 上面三个是引入vue-router(你安装路由之后不引入相当于做无用功)
export default new Router({  // 把我们的路由配置文件暴露出去
  mode: 'history',
  // vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想/// 要很丑的 hash，我们可以用路由的 history 模式
  routes: [  // 这个存放的是我们路由的配置文件

  ]
})

在 view 目录下新建两个文件夹一个是 index 一个是 mine 这个文件夹代表两个页面(这个一个规范) 一个是 index 页面一个是 mine 页面分别在 mine 和 index 下面新建 index.vue (创建我们的组件) 里面分别写上内容 '首页' 'mine 页'
在我们的 router 文件夹下的 index.js 里面引入我们的组件

import index from "@/views/index/index" // 引入index组件
import mine from "@/views/mine/index" // 引入mine组件

配置路由

export default new Router({
  mode: 'history',  // 启用history路由
  routes: [ // 这里面是路由的配置项
    {
      path: '/',  // 这个是我们访问浏览器的地址
      name: 'index',  // 这个是我们给路由起的名称
      component: index  // 这个是 地址对应的组件
    },
    {
      path: '/mine', // 这个是我们访问浏览器的地址
      name: 'mine',  // 这个是我们给路由起的名称
      component: mine  // 这个是 地址对应的组件
    }
  ]
})

上一步就代表路由配置完成我们需要把我们的路由配置挂载到我们的 vue 实例上在 main.js 里面操作

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'  // 引入我们刚刚配置的路由文件
Vue.config.productionTip = false
new Vue({
  router, // 把路由挂载到vue实例上
  render: h => h(App)
}).$mount('#app')

最后一步在我们的 app.vue 里面加一个组件 router-view

<router-link to="/">跳转到首页</router-link>
<router-link :to="{path:'/'}">跳转到首页</router-link>
    <router-link to="/mine">跳转到mine页</router-link>

    <router-view></router-view>

router-view 这个组件是一个容器我们页面的路由所对应的组件都渲染在这个容器里面 router-link 是在 vue 里面做跳转链接用的 vue 会把 router-link 渲染成 a 标签

好了一个最基本的路由完成

# 自动激活的 CSS class 的链接

当 router-link 里面的 to 地址与地址栏中的路由匹配一样时就自动激活 router-link-active

如当前路由为 /home 而 router-link-active 这个 class 名称就会自动被激活

自定义激活 class 名称 linkActiveClass

export default new Router({
  mode: 'history',  // 启用history路由
  linkActiveClass:"r-active",  // 这个就是设置激活是的class名称
  routes: [ // 这里面是路由的配置项
    {
      path: '/',  // 这个是我们访问浏览器的地址
      name: 'index',  // 这个是我们给路由起的名称
      component: index  // 这个是 地址对应的组件
    },
  ]
})

# 动态路由

简介我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

配置动态路由

{
    path : "/mine/:id", // 动态路由
    name : "mine" ,
    component: mine
}

使用的时候会自动匹配 1，2，3，4 到 mine 组件

<router-link to="/mine/1">跳转到mine页</router-link>
<router-link to="/mine/2">跳转到mine页</router-link>
<router-link to="/mine/3">跳转到mine页</router-link>
<router-link to="/mine/4">跳转到mine页</router-link>
<router-link :to="{name:'mine',params:{id:1}}">跳转到mine页</router-link>
这里需要注意的一点就是 当路由是动态路由的时候我们得用命名路由的方式跳转

# 嵌套路由

简介实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/profile                     /user/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

嵌套路由的写法

const router = new VueRouter({
  routes: [
    { path: '/user', component: User,redirect:"/user/profile"
      children: [
        {
          // 当 /user/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

# 编程式的导航

除了使用 <router-link to=""></router-link> 创建 a 标签来定义导航链接我们还可以用 js 的方法跳转页面

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

# 命名路由

简介有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})

# 重定向

重定向把地址重定向到某个路由重定向”的意思是，当用户访问 /a 时，URL 将会被替换成 /b，然后匹配路由为 /b

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

# html5 History 模式

简介 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。当使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。

解决方法在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

← Vue CLI vuex 入门 →