随笔分类 - vue-router
摘要：当需要把某种模式匹配到的所有路由，全部映射到同一个组件时，需要用到动态路由匹配，即在 vue-router 的路由路径中使用“动态路由参数” 来达到这个效果 例如，定义一个 User 组件，对于所有 username 各不相同的用户，都要使用这个组件来渲染 router.js import Vue
阅读全文
摘要：1，路由对象出现在多个地方： ① 在组件内，this.$route ② 在 $route 观察者回调内 ③ router.match(location) 的返回值 ④ 路由守卫的参数 ⑤ scrollBehavior 方法的参数 2，路由对象属性 ① $route.path，字符串类型，对应当前路由
阅读全文
摘要：可以在创建Router实例的时候，在 routes 配置中给某个路由设置名称，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候 要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象 和代码调用 router.push 一样 route
阅读全文
摘要：重定向也是通过 routes 配置完成，如，从 /user/userA 重定向到 /user/userB 当用户访问 /user/userA 时，URL将会被替换成 /user/userB，然后匹配路由为 /user/userB 重定向的目标也可以是一个命名的路由： { path : 'userA'
阅读全文
摘要：“导航” 表示路由正在发生变化 vue-router 提供的导航守卫，主要用来通过跳转或取消的方式守卫导航。 参数或查询的改变并不会触发进入 / 离开的导航守卫。 全局前置守卫 可以使用 router.beforeEach 注册一个全局前置守卫 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是
阅读全文
摘要：定义路由的时候可以配置 meta 字段 如何访问 meta 字段： ① routes 配置中的每个路由对象为路由记录，路由记录可以是嵌套的，因此，当一个路由匹配成功后，可以匹配的是多条路由记录（包含父路由记录以及子路由记录） ② 一个路由匹配到的所有路由记录会暴露为 $route 对象的 $rout
阅读全文
摘要：<router-view> 是基本的动态组件，所以可以用 <transition> 组件给它添加一些过渡效果 单个路由的过渡 若希望给每个路由组件设置各自的过渡效果，可以在各组件内使用 <transition> 并设置不同的 name 基于路由的动态过渡 可以基于当前路由与目标路由的变化关系，动态设
阅读全文
摘要：有时，进入某个路由之后，需要从服务器获取数据，可以通过两种方式实现： 1，导航完成之后获取 ① 先完成导航，然后在接下来的组件的生命周期钩子函数中获取数据，在数据获取期间显示“加载中” 之类的指示 ② 当使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据，这样我们
阅读全文
摘要：当切换到新路由时，若希望页面滚动到顶部，或者是保持原先的滚动位置，就像重新加载页面一样，vue-router 可以自定义路由切换时页面如何滚动 这个功能只在支持 history.pushState 的浏览器中可用 当创建一个Router实例，可以提供一个 scrollBehavior 方法： scr
阅读全文
摘要：打包构建应用时，JavaScript 包会变得非常大，影响页面加载，如果我们能把不同路由对应的组件分割成不同的代码块，然后在路由被访问的时候才加载对应组件，这样会更加高效。 结合Vue的异步组件和Webpack的代码分割功能，实现路由的懒加载 首先，可以将异步组件定义为返回一个Promise的工厂函
阅读全文
摘要：相关API ① this.$router.push(path)：相当于点击路由链接（可以返回到当前路由界面） 这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器回退按钮时，则回到之前的 URL 当点击 <router-link> 时，这个方法会在内部调用，所以，点击 <rout
阅读全文
摘要：有时希望同时（同级）展示多个视图，而不会嵌套展示，例如创建一个布局，有 sidebar(侧导航) 和 main(主内容） 两个视图，这时可以使用命名视图，让这两个视图同时展示 可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口，如果 router-view 没有设置名字，默认为 defau
阅读全文
摘要：Message 下 建立一个 MessageDeatil 组件 方式一：路由路径携带参数（param/query） ① 配置路由 ② 路由链接 ③ 路由组件中读取路由链接中携带的参数，$route 中 MessageDetail <template> <div> <ul> <li v-for="me
阅读全文
摘要：github：https://github.com/vuejs/vue-router 中文文档：https://router.vuejs.org/zh/ 安装：npm install vue-router --save 1、创建路由器对象模块 router / route.js 1）VueRoute
阅读全文
浙公网安备 33010602011771号