你应该知道的vue-router

时间:2020-7-27 作者:admin


一.什么是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的依赖。
你应该知道的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标签,话不多说上图完事。
你应该知道的vue-router
 可以看到在App.vue中我们应用了router-view标签,那么这个时候我们要考虑了,我们在App.vue文件中,只有这一个标签,那么内容从哪映射呢?这个时候我们找到在上文中我们在index.js中配置的路由。
你应该知道的vue-router
 在这里即为在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谷歌插件来去查看在路由中都可以传递哪些参数?
你应该知道的vue-router
 显而易见的是$router中有着path、query、params、fullpath、name、meta等属性,而这些属性,我们可以在index.js中配置也可以通过router-link和router.push的方法来去传递参数。
你应该知道的vue-router

  而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'}}">
    你应该知道的vue-router

可以看到我们此时已经将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需要进行下列配置
    你应该知道的vue-router
    将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路由元信息。
你应该知道的vue-router

我们可以使用$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记录不够用时,只能面临着失败,传入负数相同
    

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。