vue学习笔记(二) 路由学习
vue-router与vue.js深度集成,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。一般的页面应用,是用一些超链接来实现页面切换和跳转的,比如说a标签,在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
路由中有三个基本的概念:
- route,它是一条路由。Home按钮=>home内容,这是一条route,about
按钮=>about内容,这是另一条路由。 - router是一组路由,把上面的每一条路由组合起来,形成一个数组。
[ {home 按钮 =>home内容 }, { about按钮 => about 内容} ]
router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。 - 路由在项目中的基本定义为(文件router/index.js):
再通过来实现组件之间的跳转。
1.1 声明式路由
在页面中通常使用这个标签来实现页面的跳转,它属于声明式路由,相当于a标签。
如何带值传递?
用法:
1.2 编程式路由
在页面中可以使用这个标签来实现页面的跳转,还可以通过router的实例化方法来实现页面的跳转。
1.2.1 router.push
平时使用的实际上是调用router.push。
具体的语法:
router.push(location, onComplete?, onAbort?)
在具体使用该方法时,在Vue实例内部,可以通过router来访问路由的实例,项目中常用到的有(c,d为传参方式):
(a)this.router.push(‘/xxxx’) – 某一个路径
(b)this.router.push ({name : ‘xxxx’}) – 跳转到某一个页面
©this.router.push ({name : ‘xxxx’, query: xxx})
(d)this.router.push ({name : ‘xxxx’, param: {userId: ‘xxxx’}}) --由于动态路由也是传递params的,所以在 this.router.push() 方法中 path不能和params一起使用,否则params将无效。需要用name来指定页面。
3与4的区别在于在页面接收参数的方式不同:
this.route.query.xxx
this.route.param.xxx
使用这个方法,它会向栈里添加一条历史记录,所以在选择回退时,它会回退到历史页面
在项目中常见的场景是从一个单页面回退到上一层页面。
1.2.2 router.replace
语法:router.replace(location, onComplete?, onAbort?)
这个跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是替换掉当前的 history 记录。参数的传递与router.push相同。
(1) 路由按需加载:
为了不影响页面加载,如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就很高效了
我们一般定义路由:
按需加载的写法:
1.2.3 router-view
在App.vue中定义 router-view和 router-link,App.vue中定义router-view是必不可少的。
项目中使用的场景:
router-view 也可看做一个组件,结合 keep-alive 来,将所有匹配到的视图组件进行缓存处理,避免重复加载。
1.2.4 路由钩子
路由钩子主要是在路由发生变化时进行一些特殊处理,总的来说,提供了三大类钩子函数:
(1) 全局钩子
(2) 某个路由独享的钩子
(3) 组件内钩子
三种路由钩子中都涉及到了三个参数:
(1) to :Route:即将要进入的目标 路由对象
(2) from :Route 当前导航正要离开的 路由
(3) next : Function 一定要调用该方法来 resolve 这个钩子。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
next(error): 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
参考资料:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
(1)全局钩子:
router. beforeEnter 与router.afterEach
全局钩子在main.js里面调用,比如以下的场景,一个应用页面返回上一页面
(2)某个路由独享的钩子
这个没有用过,以后用上了再补上
(3)组件内钩子
组件内的钩子可以在路由组件中直接定义一下路由导航守卫。
a)beforeRouteEnter
b)beforeRouteUpdate (2.2 新增)
c)beforeRouteLeave
在项目中主要用到的是beforeRouteLeave,它的使用场景我用到最多的为:
导航离开该组件的对应路由时,比如说从某页面进入该编辑页,当放弃编辑时,给出提示“信息未保存,是否编辑”。
这里用到了状态管理store与vux,暂时忽略,现只看用法。