VUE.js的路由（vue-router）及基本使用

一、什么是前端路由

1.1 vue-router 的理解

vue-router是vue .js官方提供的一套专用的路由插件库，专门用来实现 SPA 应用。

1.2 对 SPA 应用的理解

• 单页 Web 应用（single page web application，SPA）。
• 整个应用只有一个完整的页面。
• 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
• 数据需要通过 ajax 请求获取。

1.3 什么是路由

一个路由就是一组映射关系（key - value），key 为路径, value 可能是 function 或 component。前端路由的value 是 component（组件），用于展示页面内容，当浏览器的key(路径)改变时, 对应的组件即页面内容就会相应改变进行页面显示。

路由器与路由之间的关系图

1.4 前端路由的使用场景

网站首页界面：

 登录界面：

 总结：前端路由在访问一个新页面时仅仅改变了一下路径，没有网络延迟、页面无刷新，单页面应用。

二、Vue Router 基本使用

Vue.js官方提供了一套专用的路由工具库Vue Router。由于Vue Router是Vue的一个插件，需要在Vue的全局应用中通过Vue.use( )将它纳入Vue实例中。

2.1 建立路由器模块

在vue-cli创建的项目中，router文件夹下的index.js中配置和绑定相关信息。new Router命令创建一个路由对象，一条路由的实现需要三个部分：name（路由名字），path（路径），component（组件）。

路由配置示例代码（index.js)：

import Vue from 'vue'
import Router from 'vue-router'
//将HelloWorld组件引入
import HelloWorld from '@/components/HelloWorld' 

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

 2.2 启动路由器

在vue-cli脚手架创建的项目中，main.js是入口文件，并启动路由器。

main.js代码截图：

 App.vue中使用<rouer-view/>将组件渲染在页面中：

 

 2.3 路由重定向

项目应用中通常都有一个首页，默认首先打开的是首页，目前我们默认首先打开的地址是http://localhost:8080/#/

我们想要改变这个默认地址，让它默认打开的是首页，http://localhost:8080/#/home，我们可以使用路由重定向完成。

export default new Router({
  routes: [
    {
      path:'/',
     //路由重定向第一种方式
      redirect:'/home'
     //路由重定向第二种方式
      // redirect:{name:'Home'}
      //路由重定向第三种方式
      // redirect:to=>{return 'Home';}
    },
    {
      path:'/home',
      name:'Home',
      component:Home
    },

2.4 路由懒加载

路由懒加载方式：能把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应路由，比较高效。语法（例如加载School路由组件）：

const School=()=>import('../components/School.vue')

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Student from '@/components/Student'
// 路由普通加载方式
// import School from '@/components/School'
//路由懒加载方式：能把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应路由，比较高效
const School=()=>import('../components/School.vue')

2.5  <router-link> 属性详解

<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的 <a> 标签在页面显示。

to 属性：类型string/location

表示目标路由的链接，该值可以是一个字符串，也可以是动态绑定的描述目标位置的对象。有四种写法，建议用字符串写法，很简单方便。

<!-- 字符串 -->
<router-link to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>
 
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'/home'">Home</router-link>
 
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'/home'">Home</router-link>
 
<!-- 同上 -->
<router-link :to="{ path: '/home' }">Home</router-link>
 
<!-- 同上 -->
<router-link :to="{ name: 'Home' }">Home</router-link>

2.6  路由传参

2.6.1 路由的query参数

1.传递参数

<router-link to="/student?id=666&title=你好" > 学生管理 </router-link>

2.接收参数

<template>
  <div class="stu">
    <!-- 获取query携带的参数 -->
    <p>id:{{$route.query.id}},title:{{$route.query.title}}</p>
  </div>
</template>

2.6.2 路由的params参数

1. 配置路由，声明接收params参数

   {
      path:'/student/:id/:title', //使用占位符声明接收params参数
      name:'Student',
      component:Student
    }

2. 传递参数

<router-link to="/student/666/你好">学生管理</router-link>

3.接收参数

<template>
  <div class="stu">
    <!-- 获取params携带的参数 -->
    <p>id:{{$route.params.id}},title：{{$route.params.title}}</p>
  </div>
</template>

2.6.3 路由对象属性

 控制台打印route对象属性：

this.$route.path

    类型: string

    字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

this.$route.params

    类型: Object

    一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

this.$route.query

    类型: Object

    一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 this.$route.query.user == 1，如果没有查询参数，则是个空对象。

this.$route.hash

    类型: string

    当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

 this.$route.fullPath

    类型: string

    完成解析后的 URL，包含查询参数和 hash 的完整路径。

 this.$route.matched
    类型: Array<RouteRecord>

      一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有一些在 children 数组)。
 

更多路由属性查看官网：API 参考 | Vue Router (vuejs.org)https://router.vuejs.org/zh/api/#component-injected-%E5%B1%9E%E6%80%A7

三、路由的跳转（页面间导航）

3.1 导航到不同的位置（router.push）

注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以用 this.$router.push。

想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 <router-link> 时，内部会调用这个push方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。

3.2 替换当前位置（router.replace）

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true ： 

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

 3.3 横跨历史（router.go）

采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似 window.history.go(n)

例如：

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与router.back() 相同
router.go(-1)

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

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

总结：

router.push 和 router.replace都是路由跳转，区别在于 router.push 会产生历史记录。