Vue路由
什么是Vue路由?
后端路由:即请求的URL地址都对应后端的接口,请求URL响应对应的服务器的资源。
前段路由:对于单页面程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以单页面程序中的页面跳转主要通过hash实现。
入门
导入类库
首先需要导入vue-router组件类库:
>
当导入类库后,window全局对象中就存在了一个路由的构造函数: VueRouter
;就像导入Vue类库后存在一个Vue
的构造函数一样,我们能够通过new VueRouter
的方式实例化路由对象。
如果你使用了new VueRouter({});
构造函数来实例化了一个路由对象,你会发现浏览器路径中会出现#/
路径,这个路径就是前面讲到的URL中的hash,他并不会向后端发送任何请求,而仅仅是作页面跳转,如果你#/
后拼接了一个不存在的路径,自然也不会进行跳转,页面也不会发送任何请求。
实例:
基本使用
上面我们讲到了使用new VueRouter({})
的方式实例化一个路由对象,其中包含几个参数:
//创建login组件
var login = {
template: 'login组件'
}
//创建register组件
var register = {
template: 'register组件'
}
// Router实例
var 路由对象名称 = new VueRouter({
routes: [
{ path: '/监听URL路径', component: login(组件名称) },
{ path: '/监听URL路径', component: register(组件名称) }
]
});
// Vue实例
var vm = new Vue({
el: 'app',
data: {},
methods: {},
router: 路由对象名称
});
解释:
1、
routes
表示这个路由对象中的 路由匹配规则,可以存在多个规则(注意:这里是routes
而不是routers
)2、属性一:
path
表示监听哪个路由连接地址,即你想跳转都哪个路径上,应在这里注册实现跳转到对应的组件上3、属性二:
component
表示如果路由匹配了前面的path
,则展示component属性对应的那个组件4、
component
的属性值必须是一个组件的模板对象,不能是组件的引用名称5、经过
1-4
的步骤基本完成了路由对象的创建,下面要将这个路由对象注入到Vue实例中,使用router: 组件对象名称
实现6、创建对应需要监听的组件,如上我们创建了
login
和register
组件,与之前讲的不同是这里是一个var 组件名称
其值是一个组件对象,和之前的Vue.component
方式相似,但是这里仅仅是一个组件对象,并没有注册到Vue实例中,因为没有组件名称,所以不能在HTML中使用
,注意这里的login
是组件对象的名称。
步骤:
1、创建router实例
new VueRouter
,完成相关属性的定义;2、将这个路由对象注册到Vue实例中,使用
router: 路由对象名称
的方式;3、创建第一步中定义的组件名称对应的组件,直接在
中定义var组件对象名称即可,在
template
中定义具体的HTML视图,或是通过template: '#id'
引用外部视图也行。4、在Vue实例控制域
app
中,创建
,相当于router容器,你想在页面上展示几个组件就应该在页面中创建几个容器。
如上,我们可以写具体的跳转链接了:
登录
注册
如上,当我们点击登录或注册,Vue-router就会监听都对应的URL地址,然后在path
规则中刚好匹配到规则login
,那么就会跳转到对应的组件component: login
的login组件中。
可能你会疑惑了,为什么这里的href
需要写为#/login
而不是/login
或login
,你尝试一下就知道了,因为vue-router监听URL地址是基于hash
的,不加#/
就会找不到路径。
如果你觉得每次都加#/
麻烦的话,Vue-router页提供了一个Tag:
,其在浏览器中会被解析为标签。
实例
但是上面的实例中,我们发现默认进入的根路径中仅有一个父组件名称,一般我们的登录页面应该直接显示登录框,所以vue-router提供了重定向的动能{path: '', redirect: ''}
,即在router: []
中监听根路径,如果监听都访问的是根路径就重定向到登录URL就好了。
var routerObj = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
路由参数传递
在进行页面跳转,即路由的时候,我们可能需要在发送URL时传递一些参数,常见的就如http://tycoding.cn/api?id=1&name='涂陌'
这种格式。
那么在URL中传递的参数,vue-router提供了一种获取方式:this.$route
。
那么什么时候能获取到传递的参数呢? 回顾前面讲到的Vue声明周期函数,那么在自定义组件中自然也存在生命周期函数,所以最早操作组件data
和methods
中数据的阶段就是created
这个声明周期函数的阶段。
实例:
上面打印的值中,我们能看到,我们再VueRouter
中创建的path
匹配规则,实际在HTML中会被渲染为相关的正则表达式,来实现路径的匹配。
其次,我们还能发现,在URL中拼接的参数id
在this.$route
对象的query
属性中,我们通过this.$route.query.id
即可获得传递的id值:2
。
路由嵌套
路由嵌套,顾名思义即在父级路由内部存在子路由。例如:
根路径:
http://tycoding.cn/
父级路由地址:http://tycoding.cn/api
子级路由地址:http://tycoding.cn/api/login
实例:
Account
这是Account组件
登录
注册
如上,我们使用了routes: []
中的另外一个属性:children
,顾名思义就是表示这个父规则/account
下存在一些子规则,且在URL中应该体现出来:
注意:
在children
中定义的子组件的path
规则不能加/
,即如上的,直接写path: login
即可,这样请求account/login
地址时,vue-router会找/account
规则下的login
规则,且不加/
vue-router才会自动将login
视为account
下的子路径,并自动拼接account/
,否则不会自动拼接,那么也无法完成路由的嵌套。
命名视图
我们常见的后台开发页面,经常遇到上、左、中的布局方式;那么以前我们可能使用iframe实现页面间的跳转,但是现在我们学习的路由要比其更加的方便好用。
命名视图的思想就是为每一个页面展示的视图都起一个名字,目的是为了为每个
容器刚好匹配一个指定的视图。使用方式:
routes: [
{
path: '/', components: {
'default': header
'left': left
'main': main
}
}
]
解释:
其中的path
是根路径/
,而使用components
代替之前的component
,目的就是可匹配其下的多个规则;default
表示默认的视图组件是header
这个组件,即会匹配到第一个
视图容器中;下面的两个组件会根据name名称需要对应的组件。
实现上、左、中的布局:
思路:
1、我们需要创建三个组件,名称分别为:header
、left
、main
;并且在app
中创建三个
路由容器。
2、采用命名视图的方式为每个视图都起一个名字:
...
3、注册路由实例。
实例:
交流
如果大家有兴趣,欢迎大家加入我的Java交流群:671017003 ,一起交流学习Java技术。博主目前一直在自学JAVA中,技术有限,如果可以,会尽力给大家提供一些帮助,或是一些学习方法,当然群里的大佬都会积极给新手答疑的。所以,别犹豫,快来加入我们吧!
联系
If you have some questions after you see this article, you can contact me or you can find some info by clicking these links.
- Blog@TyCoding's blog
- GitHub@TyCoding
- ZhiHu@TyCoding