一. 什么是 vue-router？

 路由是指单页利用的门路管理器，使得咱们构建单页面利用变得更加容易。Vue 的单页面利用是基于路由和组件的，路由用于设定拜访门路，并且将门路和组件按映射起来，传统的界面跳转是通过 a 标签来进行跳转界面的，在咱们应用 vue-router 治理单页面利用的时候，切换界面的时，则是门路之间的切换，此时也能够说为组件之间的切换。也就是说，路由模块的实质，就是建设起 url 和界面之间的映射分割。但在咱们上边说到了传统的跳转界面形式是用 a 标签来进行跳转界面的，那么当咱们应用 vue 的时候还要用 a 标签来跳转界面吗？答案是否定的，如果咱们来进行跳转界面时，a 标签会不行的，那么为什么呢？答案很简略，咱们的我的项目中是单页面利用，使用 a 标签是无奈跳转到别的界面的，但拜访内部链接还是能够的哦。那从哪能够看出咱们的我的项目是单页面利用呢？当咱们用 vue-cli 搭建脚手架时能够看到咱们的我的项目中只有一个 index.html，还有一种就是当咱们输出命令 npm run build 进行我的项目打包的时候，会生成 dist 文件夹，在文件夹中有着动态文件包和 index.html 此时也能展示咱们的 vue 我的项目是单页面利用。

二.vue-router 的实现原理以及两种模式

 因为咱们下面以及说到并解释了单页面利用，此时不再过多解释，当咱们在我的项目中应用 vue-router，它在加载界面时，并不会加载整个界面，而是更新路由所在门路所对应的组件。这样的作法使得当咱们切换路由时，不会从新申请界面，而是通过不同的门路来去申请不同的资源。而在 vue-router 中的单页面利用中，也提供着两种形式：Hash 模式和 History 模式, 而在 vue-router 中默认为 hash 模式。

Hash 模式

 当 vue-router 应用 hash 模式时 - 应用的是 url 的 hash 来模仿一个残缺的 URL，于是当 URL 扭转时，页面不会从新加载。hash（#）是 URL 的锚点，代表的是网页中的一个地位，单单扭转 #后的局部，浏览器会跳转到相应的地位，而不会从新加载界面，因为 HTTP 申请中不蕴含#后的局部，所以说像 URL 中增加锚点#是不会影响到服务器端的，然而每跳转一次路由，都会更改# 后的局部，这时会在浏览器的历史记录中增加记录，点击回退按钮或者应用 $router.back() 等实现界面的回退。

history 模式

 此处援用下官网文档：如果不想要很丑的 hash，咱们能够用路由的 history 模式，这种模式充分利用 history.pushState API 来实现 URL 跳转而毋庸从新加载页面。
` 在这里插入代码片

const router = new VueRouter({
  mode: 'history',  // 此时应用 history 模式
  routes: [...]    // 路由配置
})

 因为应用 hash 模式时，会在 Url 门路中退出锚点，如果想要不退出锚点失常的 Url, 咱们还是须要应用好这种模式，这种模式充分利用 history.pushState 来实现 Url 的跳转而无需去加载界面。

三. 如何装置和配置 vue-router

装置

 在终端中输出 npm install vue-router --save 下载 vue-router(前提须要装置过 node.js)，此时能够看到 package.json 文件中削减了 vue-router 的依赖。

配置

1. 在 src 新建文件 index.js(起什么名字都能够，在 main.js 引入对就 ok)
2. 在该 index.js 文件中引入包，且申明应用 vue-router

import Vue from 'vue';   // 引入 vue
import VueRouter from 'vue-router';   // 引入 vue-router
Vue.use(VueRouter)    // 申明应用插件

裸露 vue-router 对象:

export default new VueRouter({
    routes:
    [
        {
            path:'/xxx',  // 门路
            component:HelloWorld,   // 申明组件
            meta:{value:true     // 此时在 $route.meta 中会具备 value 属性}，// 传入的参数
            children:[
                {
                    path:'/xxx/ccc',
                    component:HelloChildren // 申明子组件
                    
                }
            ]
        },
        {   /* 默认指向为 */
            path:'/',
            redirect: '/xxx'   // 默认指向的门路
         },
    ]
})

3. 在 main.js 中利用路由

import router from './index.js';    //from 后为上述 index.js 的门路

new Vue({
    el:'#app',
    render: h => h(App),
    router,   /* 应用上 vue-router 引入路由 */
})

4. 在 App.vue 中引入路由组件

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

四. 应用 vue-router 实现界面的跳转

1.

 this.$router.push('/xxx)
 this.$router.replace('/xxx')
 this.$router.go('/xxx')

这三种跳转形式前面会讲述哦
2.<router-link :to="/xxx" replace tag="li" ative-class="activexxx"></router-link>

•  :to 属性是用来指定跳转的门路，门路内容就曾经在上文中的 index.js 中配置好了哦，下面的三种属性依据所在环境选择性增加，tag: 能够指定 router-link 标签渲染成什么组件，上述的配置因为 tag=”li” 则会将 router-link 渲染成 li 标签元素。
•  replace: 是使得跳转路由时不会留下 history 记录，当指定 replace 的状况下，不会返回上一个界面而是返回上上个界面(如果上上个界面也设置了 replace 则返回上上个界面).
•  active-class，当点击路由切胜利跳转路由时，会给激活的路由增加该款式，此操作中可用于导航菜单栏款式的切换中进行应用

还有等等一些其余的属性在这里不一一介绍了具体可看官网文档哦
router-link 属性官网文档入口
对于 router-link 中的参数传递下文中会有介绍哦 ↓↓↓ ( Φ 皿 Φ )
  那么与其 router-link 对应的是 router-view，那么 router-view 的用途是什么呢？router-view 是用来渲染通过路由映射过去的组件，当 router-link 中的门路产生扭转，其对应的渲染的 router-view 中的内容也会产生扭转, 从而实现无刷新的路由跳转，上面为例子哦，也就是咱们常见的在 App.vue 中为何呈现 router-view 标签, 话不多说上图完事。

 能够看到在 App.vue 中咱们利用了 router-view 标签，那么这个时候咱们要思考了，咱们在 App.vue 文件中，只有这一个标签，那么内容从哪映射呢？这个时候咱们找到在上文中咱们在 index.js 中配置的路由。

 在这里即为在 App.vue 中对应门路中咱们所渲染的组件，默认指向地位为 Msite 组件, 也就是咱们的初始界面，在初始化界面中咱们能够通过 router-link 能够跳转其余门路的界面或者 this.$router.replace() 的办法 replace 括号中传入门路来去跳转界面例如：this.$router.replace('/search')。

五.vue-router 中的参数传递

 当咱们呢点击 router-link 时，router.push()办法会在外部调用，故能够说当咱们应用 <router-link :to="..."> 时等于应用router.push() 办法。
首先咱们先利用 vue.js devtools 谷歌插件来去查看在路由中都能够传递哪些参数？

      不言而喻的是 $router 中有着 path、query、params、fullpath、name、meta 等属性，而这些属性，咱们能够在 index.js 中配置也能够通过 router-link 和 router.push 的办法来去传递参数。![在这里插入图片形容](https://img-blog.csdnimg.cn/20200726134525491.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTE5NzIxMDE4,size_16,color_FFFFFF,t_70)
    

  而 name 属性和 meta 属性咱们能够通过 $route.name 和$route.meta来去获取咱们传递的属性但咱们能够看到在 index.js 中配置的 query, 和 params 都没有在 $router 中显示，而只显示了 name 和 meta 属性和其余属性，也就是说，对于 params 和 query 属性是不能通过在 index.js 中传递的。那么该去哪传递这些属性呢？上面咱们将介绍。

•   1.query 传参：

通过<router-link :to="{path:'/shop/info',query:{id:1,user:'liu'}}">

能够看到咱们此时曾经将 query 传递到 $route 对象中，也能够通过 $router.query 来调用该参数。
当然上述办法也能够适应 name 来去传参哦 “
也能够利用 url 去进行参数的传递例如:
<router-link to="/shop/goods?id=1&user=liu"> 登录 </router-link>

下面几种传递参数的办法等同于

this.$router.push('/shop/goods?id=1&user=liu')
this.$router.push({path:'/shop/goods',query:{id:1,user:'liu'}})
this.$router.push({name:'goods',query:{id:5,user:'liu'}})// 此种办法是通过匹配 name 来去传参

.

• 2.params 传参：对于 param 的 url 传参咱们的 index.js 须要进行下列配置

将 path 配置为 path:'/msite/:id/:name' 对于 url 传参咱们能够这样来传递
<router-link to="/miste/1/liu"> 登录 </router-link> 此时将 id=1,user=liu 参数传递进入路由
然而此时也要晓得用 params 来进行参数传递时，无奈应用 path 去引入路由只能通过 name 来引入路由, 只能通过 name 来去引入路由,name 引入路由与 query 传参雷同。

六.$route 与 $router 的区别

在咱们应用 vue-router 中常常会操作两个对象 $router 和 $route，那么咱们该如何去操作两个对象呢？两个对象的作用又是什么呢？带着问题咱们来钻研下哦。

$route

  $route 示意以后路由信息，其中蕴含了以后 url 解析的失去的信息。蕴含以后的门路，参数，query 对象，hash 值，fullpath 残缺门路，matched 数组，name 以后门路的名字，meta 路由元信息。

咱们能够应用 $route.name(或其余属性例如 meta 等 …)来去获取对应值，从而便于咱们实现一些性能的实现。

$router

  $router 对象是全局路由的实例，是 router 构造方法的实例对象。那么路由的实例办法有 push,replace 以及 go 办法。其中三中办法的应用如下：

this.$router.push('/msite')  // 括号内为对应门路，对于 push 办法传参下面以及说过了此时就不再列举了
this.$router.replace('/miste')
this.$router.go(-1)   // 当传入 - 1 时为回退, 也能够传入其余数值会有不同用法

• 应用 push 办法时会像 history 栈增加一个记录，点击后退或应用 this.$router.back()办法来进行回退。能够利用到导航的回退中(将回退图像绑定回退办法，使得点击后回退到在 history 中增加过记录的上一个界面)。
• 应用 replace 跳转界面不会向 history 栈中增加新记录，因为上一个界面没有增加 history 记录所有点击回退会返回上上个界面(上上个界面需为在 history 中增加过记录的界面，否则顺次向上寻找，直到找到在 history 中增加记录的界面）

• 应用 go 办法相当于以后界面向前或向后跳转 n 个界面，n 代表在 go 办法中传入的值。

  // 传入负数即为后退，传入正数即为后退
  this.$router.go(1)   // 等于在 history 记录中前进一步
  
  this.$router.go(-1)  // 等于在 histiry 记录中后退一步
  
  this.$router.go(4)   // 等于在 history 记录中后退三步
  
  this.$router.go(100) // 当 history 记录不够用时，只能面临着失败, 传入正数雷同

 
 
 
那么此时也就总结结束了，如果有帮忙的话就点个赞呗，欢送评论区指导。