router的使用
路由的使用
之前我们的vue应用都是只有一个视图,但是一般的应用不止一个视图。于是乎就有了路由,路由可以很方便的帮我们切换视图,而且在视图切换过程没有浏览器刷新,体验比较好。
基本使用
我们通过一个简单的例子来演示,在写代码之前,我们需要安装下路由组件,路由组件由vue官方提供,在my-project
目录下执行命令yarn add vue-router
等待完成。
- 修改App.vue
<template>
<router-view/>
</template>
<script>
export default {
}
</script
- 在src文件夹下新建一个views文件夹
- 在views文件夹下新建test1.vue文件和test2.vue
.vue后缀的文件就是vue的组件,视图本质上也是组件,只是人为划分的。
test1.vue
<template>
<div>test1</div>
</template>
<script>
export default {
}
</script>
test2.vue
<template>
<div>test2</div>
</template>
<script>
export default {
}
</script>
- 在src文件夹下新建一个router.js文件
现在我们来使用router实现test1和test2的切换。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: () => import('@/App'),
children:[
{
path: '/view1',
name: 'view1',
component: () => import('@/views/test1'),
},
{
path: '/view2',
name: 'view2',
component: () => import('@/views/test2'),
}
]
}
]
})
刷新页面,我们发现一片空白,那是因为默认路由到/
路径,现在我们在浏览器地址栏输入http://localhost:8080/#/view1
,我们发现页面输出了test1,如果把view1
改成view2
,输出test2,这就是刚才我们写的那2个视图组件。 如果你希望一进入页面就跳转到view1
,可以加个重定向:
component: () => import('@/App'),
redirect:'/view1',//重定向到某个路径
由于我们的代码越来越长了,后面的贴出的代码会使用局部代码。
通过代码和a标签来切换路由
刚才我们只是通过浏览器的地址栏来切换视图,但是实际开发往往需要使用代码来切换。
- 通过代码切换
我们可以通过调用代码router.push
方法来切换。我们可以在点击事件内这样写:
this.$router.push('/view2')
或者
this.$router.push({path:'/view2'})
使用代码切换的场景还是非常多,比如登录。有时候我们无法直接获取到this指针,比如在echarts的一些方法内无法直接获取vue实例,那么难道就没办法了吗,可以试试直接在当前组件内引入vue,import Vue from 'vue'
,然后通过Vue.$router.push()
一样能调用,这是因为我们在main.js
中初始化vue实例的时候把路由组件塞进了vue实例的根节点。
- 通过超链接跳转
利用超链接也能实现切换。注意:有时候会出现点击无效。
通过query参数传递
有了路由切换,那肯定少不了视图之间的参数传递。我们先来介绍如何使用query来传参,query参数的形式:param1=value¶m2=value
。这种参数传递的方式,不需要修改任何路由,直接通过以下方式带上即可:
- url后面带上参数,例:
http://127.0.0.1/#/?id=1
- 编码方式传递,就是在调用
this.$router.push({path:'/view2'})
的时候带上,代码变成:this.$router.push({path:'/view2',query:{id:1,age:10,name:'张珊'}})
参数传递过去之后,我们还要接收,由于我们在vue框架中开发,我们应该使用vue的方式来获取参数,当然原生js也能获取,但是不太优雅。获取方式:this.$route.query.参数名
。在你需要获取参数的组件中调用就可以了。
通过path传输传递
query传递参数其实能满足大部分需求,但是为了url美观一点或者其他原因,我们希望把一些参数嵌入url,那么我们可以使用path。path传输需要预先在路由中定义占位符号。在router.js
中,我们修改/view1
,让他支持从path
传递id
这个参数:
...
{
path: '/view1/:id',
name: 'view1',
component: () => import('@/views/test1'),
},
...
传递参数的方式依然有两种:
- 在url中拼接,原则上我们是知道占位符定义的位置的,那么我们还是可以通过把参数拼接 到url中,只是相比query,参数有时候要拼接到url中间位置。
- 编码方式传递,和query有点不同:
this.$router.push({name:'view1',params:{id:1}})
;也可以这样this.$router.push({path:'/view/1'})
,其实也是字符串拼接的方式。
取值方式:this.$route.params.id
meta的使用
有时候,我们想让路由带更多的信息,比如权限,菜单图标。这个时候我们就需要使用meta了。meta就是router专门考虑到这个需求设计的。
修改路由为:
···
{
path: '/view1',
name: 'view1',
component: () => import('@/views/test1'),
meta:{
access:true,
icon:'menu'
}
},
···
现在我们在test1.vue
的mounted
钩子里面读取:
<template>
<div>test1</div>
</template>
<script>
export default {
mounted(){
//在控制台输出
console.log( this.$route.meta)
}
}
</script>
一般输出的就是当前路由的meta数据。
路由守卫(拦截)
路由守卫这个功能,这个很重要,像未登录跳转,权限拦截跳转都会用到。我们在src
下新建一个文件router.config.js
:
import router from './router'
// 路由前置拦截器
router.beforeEach((to, from, next) => {
next()//调用后放行。
})
// 路由后置拦截器
router.afterEach((to, from) => {
})
前置拦截就是进入目标路由之前做拦截处理,后置就是进入目标路由后做拦截处理。具体处理逻辑我们可以自己实现。参数方面,to,from都是路由对象,在前置拦截里面,to是目标路由,from是当前路由;在后置拦截里面,to是当前路由,from是上一次的路由。next是一个方法,调用就可以放行。
然后我们在main.js
中引入这个文件import './router.config'
动态加载路由
这里介绍的动态路由,是指这个路由不是事先配置好的,是通过代码动态添加进去的,一般可以用在后台管理菜单。这里不做介绍了,我们将在案例实践
中来做实验。
小结
路由还有很多功能,我这里介绍了都是常用的功能,如果想更加深入挖掘,可到官网查看手册。