Vue-Router
Vue路由
@皮皮榴
一个前端开发的小菜鸟,分享一些小知识,一起进步~
展开
-
Vue Router 组件内的守卫、导航解析流程
可以在路由组件内直接定义路由导航守卫(传递给路由配置的) 可用的配置 API beforeRouteEnter 在渲染该组件的对应路由被验证前调用。 此时不能获取组件实例 this , 因为当守卫执行时,组件实例还没被创建! beforeRouteUpdate 在当前路由改变,但是该组件被复用时调用。 举例来说,对于一个带有动态参数的路径 /users/:id,在 /users/1 和 /users/2 之间跳转的时候,由于会渲染同样的 UserDetails 组件,因此组件实例会被复用。而这个钩子就会在原创 2022-04-29 17:37:20 · 439 阅读 · 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 · 1377 阅读 · 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 · 867 阅读 · 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 · 499 阅读 · 0 评论 -
vue Router创建、Router小知识
Vue.use Vue.use() 作用:用来注册组件,如果参数是函数的话Vue.use内部直接调用这个函数来注册组件;如果参数是一个对象,则会调用这个对象的install方法来注册插件 创建路由 路由规则对象与路由实例对象 动态路由 动态路由参数获取 ...原创 2021-08-02 21:26:13 · 132 阅读 · 0 评论 -
Vue Router 嵌套路由
首页、详情页共用一个头部、尾部 嵌套路由原创 2021-08-02 21:43:05 · 64 阅读 · 0 评论 -
Hash 模式和 History 模式的区别
原理的区别 Hash 模式是基于锚点,以及onhashchange事件 通过锚点的值作为路由地址,当路由地址发生变化,触发onhashchange事件,根据路径决定页面上呈现的内容 History 模式是基于HTML5中的History API history.pushState() IE10以后才支持 (有兼容性问题) history.replaceState() pushState() 方法与 push()方法的区别: 当调用history.push()时,路径会发生变化,这时要向.原创 2021-08-03 20:28:32 · 213 阅读 · 0 评论 -
vue Router 编程式导航
编程式导航 push方式跳转路由 与 replace方式跳转路由 push方式跳转路由会记录路由历史(跳转历史),这样在浏览器中通过返回箭头可以返回上次历史页面 而replace方式跳转路由不会记录历史,这样在浏览器中,左上角的 ← →箭头是不可点击的,因为没有历史 go方法表示后退,可以传递负数 $router.go(-1) = $router.back() ...原创 2021-08-03 20:10:01 · 84 阅读 · 0 评论