你应该知道的vue-router

一.什么是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';
import VueRouter from '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实现界面的跳转

 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>

•  router-link默认会渲染为带有正确链接的a标签，可以通过tag属性配置为别的标签，也可以添加其他属性带给我们开发中的便利，下面介绍先介绍三个属性，多余的属性可以去官方文档进行查看。

•  :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的方法来去传递参数。

  而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记录不够用时，只能面临着失败,传入负数相同
  

 
 
 
那么此时也就总结完毕了，如果有帮助的话就点个赞呗，欢迎评论区指点。