Vue-Router
Vue路由
@皮皮榴
一个前端开发的小菜鸟,分享一些小知识,一起进步~
展开
-
Vue Router 组件内的守卫、导航解析流程
可以在路由组件内直接定义路由导航守卫(传递给路由配置的)可用的配置 APIbeforeRouteEnter在渲染该组件的对应路由被验证前调用。此时不能获取组件实例 this ,因为当守卫执行时,组件实例还没被创建!beforeRouteUpdate在当前路由改变,但是该组件被复用时调用。举例来说,对于一个带有动态参数的路径 /users/:id,在 /users/1 和 /users/2 之间跳转的时候,由于会渲染同样的 UserDetails 组件,因此组件实例会被复用。而这个钩子就会在原创 2022-04-29 17:37:20 · 423 阅读 · 0 评论 -
Vue Router 重定向和别名
重定向举例说明:重定向是指当用户访问 /home 时,URL 会被 / 替换,然后匹配成 /。重定向也是通过 routes 配置来完成,下面例子是从 /home 重定向到 /:const routes = [{ path: '/home', redirect: '/' }]重定向的目标也可以是一个命名的路由:const routes = [{ path: '/home', redirect: { name: 'homepage' } }]也可以是一个方法,动态返回重定向目标:const r原创 2022-04-29 15:48:13 · 1339 阅读 · 0 评论 -
Vue Router 命名路由、(嵌套)命名视图
命名路由在Vue Router中 除了 path 之外,还可以为任何路由提供 name。const routes = [ { path: '/user/:username', name: 'user', component: User }]要链接到一个命名的路由,可以向 router-link 组件的 to 属性传递一个对象:<router-link :to="{ name: 'user', params: { username: 'erina' }}"&g原创 2022-04-29 14:57:35 · 802 阅读 · 0 评论 -
Vue Router 路由导航
Vue Router通过 Vue.js,我们已经用组件组成了我们的应用。当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们。Vue Router的使用声明式使用 router-link 组件进行导航,通过传递 to 来指定链接。<router-link> 将呈现一个带有正确 href 属性的 <a> 标签。官方示例:<script src="https://unpkg.com/vue@3"&原创 2022-04-29 14:19:26 · 481 阅读 · 0 评论 -
vue Router创建、Router小知识
Vue.useVue.use() 作用:用来注册组件,如果参数是函数的话Vue.use内部直接调用这个函数来注册组件;如果参数是一个对象,则会调用这个对象的install方法来注册插件创建路由路由规则对象与路由实例对象动态路由动态路由参数获取...原创 2021-08-02 21:26:13 · 105 阅读 · 0 评论 -
Vue Router 嵌套路由
首页、详情页共用一个头部、尾部嵌套路由原创 2021-08-02 21:43:05 · 52 阅读 · 0 评论 -
Hash 模式和 History 模式的区别
原理的区别Hash 模式是基于锚点,以及onhashchange事件通过锚点的值作为路由地址,当路由地址发生变化,触发onhashchange事件,根据路径决定页面上呈现的内容History 模式是基于HTML5中的History APIhistory.pushState() IE10以后才支持 (有兼容性问题)history.replaceState()pushState() 方法与 push()方法的区别:当调用history.push()时,路径会发生变化,这时要向.原创 2021-08-03 20:28:32 · 196 阅读 · 0 评论 -
vue Router 编程式导航
编程式导航push方式跳转路由 与 replace方式跳转路由push方式跳转路由会记录路由历史(跳转历史),这样在浏览器中通过返回箭头可以返回上次历史页面而replace方式跳转路由不会记录历史,这样在浏览器中,左上角的 ← →箭头是不可点击的,因为没有历史go方法表示后退,可以传递负数$router.go(-1) = $router.back()...原创 2021-08-03 20:10:01 · 76 阅读 · 0 评论