VueRouter

Congratulations _

已于 2024-07-19 14:43:12 修改

阅读量349

点赞数 3

文章标签：前端 vue

于 2024-07-19 14:38:56 首次发布

本文链接：https://blog.csdn.net/weixin_44641002/article/details/140548904

版权

1.vueRouter是什么

vue.js中的路由管理器

2.两个内置组件

router-link

router-view

3.active-class是哪个组件上的属性

route-link

4.路由重定向，路由重命名

routes:[{{ path: '/home', redirect: '/index' }}]

5.动态路由

router.addRoute

6.路由传值

1.在路由配置的path中加上:id,在组件中使用params.id获取到值

2.query

3.params

7.$router 和 $route 的区别

$router是VueRouter的实例,使用$router.push方法导航到不同的URL。返回上一个历史history用$router.to(-1)

$route为当前router跳转对象。可以获取当前路由的name,path,query,parmas等数据

8.路由钩子函数(7)

全局守卫

独享守卫

组件内守卫

9.路由的mode值

hash：地址栏 URL 中的 # 符号；使用变更hash不会刷新页面的特性, 来变更路由, 做到单页面无刷新

history：window.history对象打印出来可以看到里边提供的方法和记录长度。

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法

abstract：用于非浏览器环境，比如在服务器端渲染（Server-Side Rendering）时使用

10.路由懒加载

import

webpack提供的require.ensure()

11.路由跳转和location.href跳转的区别

路由跳转：组件之间的跳转，不会刷新页面

location.href：页面之间的跳转，会刷新页面

12.配置404页面

 {     path: '/404',       
       component: () => import('@/views/error-page/404'),       
       hidden: true     
  },     
/这个*匹配必须放在最后，将改路由配置放到所有路由的配置信息的最后/;
/ 否则会其他路由path匹配造成影响/
 {     path: '*',
       redirect: '/404', 
       hidden: true 
  }

13.路由跳转

组件导航：使用两个内置组件

编程式导航：router.push 、router.replace、 router.go

14.路由导航解析流程

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入