最近在学习vue.js 2.x。vue-router是其中十分重要的一部分。
在以前的学习中,用过很多后端的路由,比如在laravel框架中,路由的功能是根据前端不同的URL请求,根据路由匹配将请求分发到不同的中间件、方法等。而vue-router是一个前端路由,即是根据不同的路径来决定该加载什么组件。
vue-router的安装:如果在初始化vue-cli的时候,安装了vue-router,就不用重复安装。如果未安装,切换至项目目录下,输入npm install vue-router --save,安装完成。
vue-router的使用:
第一步、首先需要引入并使用该全局组件。如下:
import Router from 'vue-router'
Vue.use(Router)
第二步、初始化router实例、如下:
let router= new Router({
mode: 'history',
routes: [
{
path: '/',
component: IndexPage
}]
})
mode有'hash'和'history'两种,和后端配置有关,默认为hash。routes是一个由path(路径),component(要加载的组件)为键的对象所组成的数组。(注意是routes)
第三步、router的使用。
在需要使用路由的组件中,加入router,如下:
new Vue({
el: '#app',
router,//es2015的写法,等同于router:router
template: '<Layout/>',
components: { Layout }
})
在使用该路由的组件中,使用<router-view></router-view>这个内置组件来装载需要加载的组件,实际效果是该内置组件会被替换成为路由所匹配的组件,如上的<Indexpage></Indexpage>。
同样,如果需要使用类似于href的链接来进行页面间的跳转(实际为加载不同的组件),可以使用<router-link></router-link>内置组件,该组件需要绑定属性,v-bind:to={path:'xxxx'}(简写为:to={path:'xxxxxx'})。
第四步:路由子节点
在实际使用时,路由是多层的,例如访问/detail路径时,加载到一个详情界面,而/detail/apple需要跳转到苹果的详情,/detail/orange需要跳转到橘子的详情。
vue-router的解决方式是建立路由的子节点,如下:
routes: [
{
path: '/detail',
component: DetailPage,
children: [
{
path: 'apple',
component: ApplePage
},
{
path: 'orange',
component: OrangePage
}
]
}
]
同样,在DetailPage这个组件中需要使用<router-view></router-view>这个组件来加载不同的组件。(注意:子节点中的path应该为相对路径,不需要加/)。
第五:路由重定向
比如在设计用户登录模块时,如果用户未登陆的状态下访问,需要将用户的访问页面重定向到登陆界面。如下设置路由:
routes: [
{
path: '/detail',
redirect: '/login' ,
}
]
在访问/detail时,会重定向跳转到/login。
如有不正确的,希望各路大神指正