Vue 核心插件 Router 路由详解

一、路由是什么

Vue Router 官方教程

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

Vue路由即vue-router，在web开发中，“router”是指根据url分配到对应的处理程序。

Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接，从而允许某些路径渲染与之关联的任何一个视图。

在计算机网络原理中，路由指的是根据上一接口的数据包中的IP地址，查询路由表转发到另一个接口，它是决定一个端到端的网络路径。所以说路由就是用来解析URL以及调用对应的控制器的。

在web开发中，客户端的请求是以url的形式传递给服务器，它根据URL将请求分配到指定的一个端并且在这个过程中对其进行处理。然后路由再调用相关的控制器，控制器调用相关的服务，并返回视图对象。路由再从视图对象中提取生成好的网页代码返回给Web服务器，最终返回给客户端。

简单理解：

• 一个路由（route）就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理
• 前端路由中，key是路径，value是组件（component）用于展示页面内容
• 后端路由中，key是路径，value是function 用于处理客户端提交的请求
• 路由的作用是：设定访问路径，并将路径和组件映射起来（就是用于局部刷新页面，不需要请求服务器来切换页面）

router和route

• router： 管理整个路由系统,里面保存所有的路径信息,能够实现路由的跳转
• route： 是单个路由,存放当前路径信息,携带的参数

二、路由的使用

1. 路由安装

路由的安装需要借助Vue脚手架 ，通过npm命令进行安装。

npm i vue-router

一般情况下，直接安装vue-router或安装最新版本， Vue-router当前最新版本为4，但Vue-router4只能在Vue3中使用，所以 若在vue2中使用 需要安装 Vue-router3

npm i vue-router@3

2.路由配置和使用

第一步
在src文件夹下创建router/index.js文件，单独存放路由配置

//该页面用于创建整个应用的路由管理者router
import VueRouter from "vue-router";

//引入对应的路由组件
import XXX from 'XXX'
import XXX from 'XXX'

//应用VueRouter
Vue.use(VueRouter)

//创建并暴露一个router
export default new VueRouter({
	//路由规则
    routes:[
        {},

    ]
})

第二步

在routes中配置路由规则

 routes:[
        {
            path:'/跳转路径',
            component:组件名称
        },
        {
            path:'/跳转路径',
            component:组件名称
        },
    ]

第三步
在main.js中配置路由：

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 4. 挂载到vue实例中
  router
}).$mount('#app')

第四步
在对应的组件中使用路由：
实现切换：

<router-link to="/跳转路径">跳转</router-link>

指定位置展示路由组件：

<router-view><router-view>

值得注意的几个点：

1. 一般情况下，我们在使用路由时，用到的路由组件通常会在src文件夹下新创建一个名为views（或pages）的文件夹来存放路由组件，而一般的组件则放在components中。
2. 路由组件在被切换时，原本的路由是已经被销毁了的，只有再次点击对应的导航或路由切换按钮，则该路由组件才会再次被挂载。
3. 每个路由组件都有自己的$route属性，里面存储该路由组件的信息
4. 一个应用只有一个$router属性，用于管理所有路由

代码示例

创建路由组件文件：src/views/xxxx.

TestA.vue:

<template>
  <div>
    <h4>我是内容一</h4>
  </div>
</template>

<script>
export default {
    name:'TestA'
}
</script>

<style scoped>
h4{
  text-align: center;
}
</style>

TestB.vue

<template>
  <div>
    <h4>我是内容二</h4>
  </div>
</template>

<script>
export default {
    name:'TestB',
}
</script>

<style scoped>
h4{
  text-align: center;
}
</style>

创建路由配置文件src/router/index.js.

//该文件用于创建整个应用的router
//首先，需要引用vue-router
import VueRouter from "vue-router";

//引入路由组件
import TestA from '../views/TestA'
import TestB from '../views/TestB'

//应用VueRouter
Vue.use(VueRouter)

//创建并暴露一个VueRouter
export default new VueRouter({
    routes:[
        //配置路由路径和路由组件
        {
            //这里的路径可自由定义，但是为了初学者好理解，我就采用和组件同样的命名，防止在写路径的时候搞混
            path:'/TestA',
            component:TestA     //要跳转到的组件   
        },
        {
            path:'/TestB',
            component:TestB
        }
    ]
})

在main.js中配置路由：

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入路由配置
import router from './router'


//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
  render: h => h(App),
  // 4. 挂载到vue实例中
  router
}).$mount('#app')

在一般组件中设置路由切换：
components/BannerA.vue:

<template>
  <div>
      <!-- 学习路由的使用 -->
      <h2>学习路由的使用</h2>
      <!-- 实现路由的切换 -->
      <!-- 为了能区分开当前所处路由，可以使用active-class属性给标签内容高亮 -->
      <router-link to="/TestA" active-class="active">导航一</router-link>&nbsp;&nbsp;&nbsp;
      <router-link to="/TestB" active-class="active">导航二</router-link>
  </div>
</template>

<script>
export default {
    name:'BannerA'
}
</script>

<style scoped>
h2{
    text-align: center;
}
a{
    text-decoration: none;
}
.active:visited{
  color: brown;
}
</style>

这里：active-class使用给被选中的路由更改样式
在app.vue中展示路由视图：

<template>
	<div class="app">
    <BannerA/>
    <!-- 展示路由 -->
    <router-view></router-view>
  </div>
</template>

<script>
//引入组件
import BannerA from './components/BannerA'
export default {
	name:'App',
  components:{
    BannerA
  }
}
</script>

<style scoped>
.app{
  width: 50%;
  margin: 0 auto;
  border: 1px solid rgb(26, 244, 248);
}
</style>

页面初始的时候，是看不见路由组件的

当鼠标点击导航一，则呈现的就是导航一对应的路由组件，当鼠标点击导航二，则呈现的就是导航二对应的路由组件

三、嵌套路由(子路由)的使用

实际开发中，我们不单单会使用到一层路由，有时候会涉及到两层或两层以上的路由，多级路由又称嵌套路由（子路由），其实理解起来和一级路由是一个道理，只不过发生了嵌套

嵌套路由的配置： Vue Router 中，给每一个路由提供了一个children属性，用来配置子路由

1. 配置router文件中index.jd文件

//嵌套路由

route:[{
    //注意'/UserManaga' 后面带 / ，否则不生效
    path: '/UserManaga/',
    //name可不写
    name: 'UserManaga',
    component: UserManaga,
    //子路由
    children:[
      {
        path:'AddStu',
        //也不使用懒加载，先在文件头部提前引入
        component:()=> import('../components/stuPages/AddStu.vue')
      },
      {
        path:'UpdateStu',
        //@是定位 src 文件夹
        component:()=> import('@/components/stuPages/UpdateStu.vue')
      }
    ]
  },
  ]

注意：children里面的path 不要加 / ，加了就表示是根目录下的路由。

2. 组件跳转配置

<template>
<section class="UserManaga">
    <div>
        <h3>stuOpration</h3>
        <ul>
            <li><router-link to='/UserManaga/AddStu' >manga</router-link></li>
            <li><router-link to='/UserManaga/UpdateStu'>update</router-link></li>
        </ul>  
    </div>
    <div>
        <router-view/>
    </div>
  </section>
</template>

<script>
export default {}
</script>

<style scoped>
  section.UserManaga{
    display: flex;
  }
  div{
    padding: 10px;
    border: 1px solid tomato;
  }
  .active{
    font-size: 1.5rem;
    color: skyblue;
  }
</style>

注意: router-link 中需要加上父级路由的名字 /father/son

四、路由跳转与传参

1.路由导航跳转

声明式导航

在Vue中，可通过router-link来替代a标签实现声明跳转。router-link 是vue-router提供了一个全局组件,实质上在渲染时会渲染成a链接，to属性等价于href属性（to无需#）。

路由的跳转主要有两种形式，一种是通过name，另一种是path。
示例

<template>
  <div>
    <div class="footer_wrap">
      // 通过路径(path)进行跳转
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
	  <router-link :to="{ path: '/word' }">路由path方式跳转首页</router-link>
      <router-link to="/part">朋友</router-link>
      // 通过名称(name)进行跳转
      <router-link :to="{ name: 'word' }">首页</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>
//在控制台元素检查时会发现激活的类名 在样式style中定义高亮样式 点击时就会高亮

编程式导航

编程式导航是通过JS代码来进行跳转,同样，可以使用path和name两种形式跳转。
语法：

<button @click='goHome'>首页</button>
<button @click='goMy'>我的</button>

goHome() {
	this.$router.push('/home')
	//the.$router.push({path:'/home'}) 一样效果
}
goMy() {
	this.$router.push({name:'my'})
}

2. 路由传参

vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。

方法一： params传参（显示参数）

params传参（显示参数）又分为 声明式 和 编程式 两种

声明式导航传参 router-link
该方式是通过 router-link 组件的 to 属性实现，该方法的参数可以是一个字符串路径，或者一个描述地址的对象。使用该方式传值的时候，需要子路由提前配置好参数，例如：

//子路由配置
{
  path: '/child/:id',
  component: Child
}

//父路由组件
<router-link :to="/child/101">进入Child路由</router-link>
<router-link :to="/child/张三">进入Child路由</router-link>

编程导航传参 this.$router.push
使用该方式传值的时候，同样需要子路由提前配置好参数，例如：

//子路由配置
{
  path: '/child/:id',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    path:'/child/${id}',
})

在子路由中可以通过下面代码来获取传递的参数值

this.$route.params.id

方式二：params 传参（不显示参数）

params 传参（不显示参数）也可分为 声明式 和 编程式 两种方式，与方式一不同的是，这里是通过路由的别名 name 进行传值的

声明式 router-link
该方式也是通过 router-link 组件的 to 属性实现，例如：

<router-link :to="{name:'Child',params:{id:123}}">进入Child路由</router-link>

编程式 this.$router.push
使用该方式传值的时候，同样需要子路由提前配置好参数，不过不能再使用 :/id 来传递参数了，因为父路由中，已经使用 params 来携带参数了，例如：

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    params:{
    	id:123
    }
})

在子路由中可以通过下面代码来获取传递的参数值

this.$route.params.id

注意：上述这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候，传递的值会丢失

方式三：query 传参（显示参数）

query 传参（显示参数）也可分为 声明式 和 编程式 两种方式

声明式 router-link
该方式也是通过 router-link 组件的 to 属性实现，不过使用该方式传值的时候，需要子路由提前配置好路由别名（name 属性），例如：

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由组件
<router-link :to="{name:'Child',query:{id:123}}">进入Child路由</router-link>

编程式 this.$router.push

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    query:{
    	id:123
    }
})

在子路由中可以通过下面代码来获取传递的参数值

this.$route.query.id

五、router-link详解

1. router-link 从哪里来的？
在路由配置文件中有一段Vue.use(vue-router)代码职中Vue.use()的作用是安装 Vue.js 插件，如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
而Vue.use(vue-router)就是全局注入一个vue-router插件，这样就可以使用vue-router中的router-link、router-view的组件，当然，这两组件也是全局的。

2. router-link是什么
<router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to 属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名

3. < router-link >的属性及其用法
属性：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class

属性to，必选 。指定要跳转到的链接。 可以是一个字符串，也可以动态绑定一个跳转链接，同时可以携带参数

to接收一个字符串：

<router-link to='/home'>home</router-link>

动态绑定并且携带参数：

     <router-link class='classLink' target="_blank" 
       :to="{path: '/news',query: {id: id}}">
       {{items[0].content}}
     </router-link>
    // target='_blank' 表示跳转到一个新的页面

属性tag。可以将渲染成指定的标签，默认是渲染成a标签。
下方代码是将router-link渲染成li标签

//将router-li 渲染成li
<router-link :to="index"
              tag="li"
              event="mouseover">Home
</router-link>
 
//如果此时我们想要在这个li标签中添加a标签,如下所示，可以不为a标签添加href属性
<router-link :to="{name:'Home'}" tag="li">
    <a>Home</a>
</router-link>

属性event。该属性指定触发router-link的鼠标事件类型，默认值为click。
下方代码将router-link触发事件改为mouseover（鼠标移入事件）

<router-link :to='home' event='mouseover'>
    home
</router-link>

属性replace。router-link 跳转默认模式（replace=‘false’）是采用router.push() 。当replace='true’后跳转模式采用router.replace()。导航不会记录到history

4. < router-link >上的两个类名
当使用<router-link></router-link>声明式导航跳转时，会自动给当前导航加上两个类名

1. router-link-active 模糊匹配(较多使用)

路由中，子路由的path设置（比如：http://localhost:8080/home）包含了父路由的path设置（比如：http://localhost:8080/）,那么点击子路由的时候，给子路由添加router-link-active类时，父路由也有router-link-active类。

**to="/my"  可以匹配 /my    /my/a    /my/b**   ....  

2. router-link-exact-active 精准匹配

router-link-exact-active是Vue Router中的一个属性，用于指定在精确匹配时应该添加到链接上的活动类。当链接的路径与当前路由的路径完全匹配时，该类将被添加到链接上。

*to="/my" 仅可以匹配  /my** 

面试题 $ route和$ router的区别

$ router
$router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，包含了所有的路由包含了许多关键的对象和属性。例如history对象
$router.push({path:’/path’}); 本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录
$router.replace({path:’/path’}); 替换路由，没有历史记录

$ route
$route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/index/” 。

$route.params
对象，包含路由中的动态片段和全匹配片段的键值对

$route.query
对象，包含路由中查询参数的键值对。例如，对于 /index?id=1 ，会得到 $route.query.id == 1。

$route.router
路由规则所属的路由器（以及其所属的组件）。

$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$route.name
当前路径的名字，如果没有使用具名路径，则名字为空。
$route.path, $route.params, $route.name, $route.query这几个属性很容易理解，主要用于接收路由传递的参数

params传参合query传参的区别

1. params参数在地址栏中不会显示，query会显示
   例如：

this.router.push({path:'/customList'，params:{id:6}})
this.router.push({path:'/customList'，query:{id:6}})

params: http://localhost:8080/#/customList
query:http://localhost:8080/#/customList?id=6

2. 网页刷新后params参数会不存在