vue-router是vue官方指定的路由库,让我们来撸一遍vue-router的基本概念吧!
安装
我是以直接下载的方式来引入vue-router的。
1 | <script src="./lib/vue-router.js"></script> |
使用vue-router
定义路由
1 | const routes = [ |
创建 router 实例
1 | const router = new VueRouter({ |
vue实例注入路由
通过 router 配置参数注入路由。
1 | var app = new Vue({ |
通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由。
使用路由出口
1 | <!-- 路由出口,与angular的router-outlet类似 --> |
路由跳转
router-link
通过router-link组件,我们可以进行路由的跳转。to属性的写法很多,请参考router-link。
1 | <router-link to="/b">Component B</router-link> |
编程式路由
router.push(location, onComplete?, onAbort?)
该方法的参数location可以是一个字符串路径,或者一个描述地址的对象。用法如下:
1 | router.push('b'); |
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
1 | router.replace(...) |
ps:你也可以在router-link使用replace。
1 | <router-link :to="..." replace> |
router.go(n)
类似 window.history.go(n)。是history回退和前进的操作。
了解了上述几个点后,你基本上可以完成基本的路由功能了。
嵌套路由
一个组件内部也可以有路由视图router-view。
1 | <div> |
于此同时需要在路由定义处添加children属性。也是类似嵌套的写法。
1 | { |
命名视图
当我们的布局是由几部分组成时,并且我们希望每一部分都有自己的路由,那么此时就不是嵌套路由了,而是多路由视图,这个时候我们就需要用到命名视图了。
1 | <router-view class="view one"></router-view> |
而在定义路由的时候也要对应好。
1 | const router = new VueRouter({ |
用watch监测路由
很多时候我们可能需要监测路由变化,那么需要在watch中监测’$route’,方法大体是’$route’ (to, from) {your code}
1 | watch: { |
路由重定向
重定向的意思就是本来是要跳路由A的,但是定向到B。写法如下:
1 | routes: [ |
路由别名
1 | routes: [ |
alias的意思是别名,通俗讲,你大名是张三,别人叫你阿三,你也答应了,阿三就是你的别名。反映到路由上就是说,b是a的别名,那我输入路由b,地址栏会显示b,但也会映射到A组件;如果输入a,那地址栏就还是a,组件也是A,没什么变化。
向路由组件传递props
在组件中使用 $route 会使之与其对应路由形成高度耦合,我们可以使用props的形式来重新定义。这样id就会作为一个prop属性,用来接收传递的数据。
1 | // 路由定义 |
路由守卫
通过跳转或取消的方式守卫路由。
全局守卫
使用router.beforeEach注册全局的路由守卫:
1 | router.beforeEach(function(to, from, next) { |
next:一定要调用该方法来 resolve 这个钩子
- next(): 进行管道中的下一个钩子。
- next(false): 中断当前的导航。
- next(‘/‘) 或者 next({ path: ‘/‘ }): 跳转到一个不同的地址。也可以传params的。
路由独享的守卫
利用beforeEnter钩子实现。
1 | const routes = [ |
组件内的守卫
可以利用beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave几个钩子来定义守卫。
- beforeRouteEnter用于拦截进入组件的情形。
- beforeRouteUpdate用于当前路由改变,但是该组件被复用的情况,如/user/1 和 /user/2 之间跳转的时候。
- beforeRouteLeave用于拦截离开组件的情形。
路由transition
router-view是基本的动态组件,所以我们可以用 transition组件给它添加一些过渡效果。
1 | <transition name="slide"> |
路由切换时记住滚动的位置
创建 Router 实例时,指定scrollBehavior属性。
1 | const router = new VueRouter({ |
更多功能实现请参考vue-router文档。
扫一扫下方小程序码或搜索Tusi博客
,即刻阅读最新文章!