深入理解Vue router的部分高级用法

今天要介绍的是路由元信息，滚动行为以及路由懒加载这几个的使用方法。

1.路由元信息

什么是路由元信息，看看官网的解释，定义路由的时候可以配置 meta 字段可以匹配meta字段，那么我们该如何使用它，一个简单的例子，改变浏览器title的值。下面上代码。

//简单的我就不写了直接上解决方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
  mode: 'history',
  routes: [
    {path: 'home', name: 'Home', component: Home,meta:{title:"主页"}}
    {path: 'login', name: 'Login', component: Login,meta:{title:"登录"}}
  ]
})
//可以在跳转之前判断跳转的组件的名字并用window.document.title赋值
Router.beforeEach((to,from,next) => {
  window.document.title=to.meta.title
})

上面的是不是看上去很简单呢，但是它并不简单，我只是举了一个比较小的例子罢了。还要看大家怎么活学活用这样才好，但是我强调几点需要注意的

第一点就是这个beforeEach页面跳转之前调用，好处是比如想要改变title的值不会显得太突兀，可以直接替换。

第二点afterEach这个不用我说了吧这个是在组件跳转之后调用比较适用于返回页面之前浏览过的区域或者是让页面返回顶部的操作。

2.滚动行为

想必各位同学应该知道我要讲些什么了没错就是页面的前进和后退时的滚动事件，怎么实现呢，有两种实现方式，先看代码。

//刚才我说过的方法直接使用afterEach方法去实现组件的scrollTo归零
Router.afterEach((to,from,next) => {
  window.scrollTo(0,0)
})

下面是真正的回滚事件可以看看

//简单的我就不写了直接上解决方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
  mode: 'history',
  routes: [
    {path: 'home', name: 'Home', component: Home,meta:{title:"主页"}}
    {path: 'login', name: 'Login', component: Login,meta:{title:"登录"}}
  ]，
  //有两种小的方式进行回滚
  //{ x: number, y: number }
  //{ selector: string, offset? : { x: number, y: number }}
  //第二种方式仅适用于(offset 只在 2.6.0+ 支持)
  scrollBehavior (to, from, savedPosition) {
  console.log(savedPosition)
  return { x: 0, y: 0 }
  }
})

上面我们介绍了scrollBehavior的回滚方法或者说是scrollBehavior的滚动行为，但是想必大家可能对这种方法还有些不太理解，下面我们看看官网是怎么讲解的，使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。没错这个方法就是scrollBehavior滚动行为。另外需要注意: 这个功能只在支持 history.pushState 的浏览器中可用。更多的使用方法可以去官网去看看。

3.路由懒加载

或许不应该叫路由懒加载应该叫按需加载我觉着是更合适的。不解释以后用多了你们就会理解。下面上代码。

//代码很简单看看就知道了，下面只贴部分代码
{path:'homepages',name:'Homepages',component:homepages,resolve}

没错只要使用resolve就能实现按需加载的要求，是不是很简单，但是resolve还有很多其他使用方式建议去官网看看。另外诸如go(),history等方法的使用还是去官网上看看自己写出来理解会更快。

总结

以上所述是小编给大家介绍的Vue router的部分高级用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • VueJs路由跳转——vue-router的使用详解

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ​p

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • Vue-Router模式和钩子的用法

    上一篇主要写了一下vuer-router的基本使用,可以说解决温饱了,下面就再来点下午茶吧 模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型history 还有 hash routes: routes // 可以缩写成routes }) 有两种模式可供选择,history 和 hash,大致对比一下, 模式 优点 缺点 hash 使用简单.无需后台支

  • vue-router 中 meta的用法详解

    如果我想做下面这个功能: 路由 代码: 用这个获取 以上这篇vue-router 中 meta的用法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 深入理解Vue router的部分高级用法

    今天要介绍的是路由元信息,滚动行为以及路由懒加载这几个的使用方法. 1.路由元信息 什么是路由元信息,看看官网的解释,定义路由的时候可以配置 meta 字段可以匹配meta字段,那么我们该如何使用它,一个简单的例子,改变浏览器title的值.下面上代码. //简单的我就不写了直接上解决方案 import Vue from 'vue' import Router from 'vue-router' import Login from '../login/Login' import Home fro

  • vue router 组件的高级应用实例代码

    1 动态设置页面标题 页面标题是由 <title></title> 来控制的,因为 SPA 只有一个 HTML,所以当切换到不同的页面时,标题是不会发生变化的.必须通过 JavaScript 来修改 <title></title> 中的内容: window.document.title ='xxx' 有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中,通过 JavaScript 来修改 <title></title>

  • 详解Vue中watch的高级用法

    假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' },

  • Vue.js中关于侦听器（watch）的高级用法示例

    Vue侦听器watch 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的.例如: <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> &l

  • Vue Router深扒实现原理

    目录 回顾Vue Router的核心代码 代码实现 创建Vue-Router插件 构造函数 完整代码 Vue Router官网 前置知识:插件.slot插槽.mixins混入.render函数.运行时和完整版的Vue 回顾Vue Router的核心代码 // 注册插件 // Vue.use() 内部调用传入对象的 install 方法 Vue.use(VueRouter) // 创建路由对象 const router = new VueRouter({ routes: [ { name: 'ho

  • 如何理解Vue的render函数的具体用法

    本文介绍了如何理解Vue的render函数的具体用法,分享给大家,具体如下: 第一个参数(必须) - {String | Object | Function} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.b

  • vue 组件高级用法实例详解

    一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-component19 :count="1"></my-component19> </div> Vue.component('my-component19',{ name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件

  • Vue高级用法实例教程之动态组件

    Vue高级用法实例教程之动态组件

    目录 基础描述 AST解析 render函数 普通组件和动态组件的对比 工厂函数形式的动态组件 总结 动态组件我相信大部分在开发的过程中都会用到,当我们需要在不同的组件之间进行状态切换时,动态组件可以很好的满足我们的需求,其中的核心是component标签和is属性的使用. 基础描述 // vue <div id="app"> <button @click="changeTabs('child1')">child1</button>

  • Vue Router嵌套路由(children)的用法小结

    Vue Router嵌套路由(children)的用法小结

    目录 简介 使用场景 官网网址 示例 路由配置 用户页面(父页面) 子路由的path前加“/” 简介 说明 本文介绍Vue Router的嵌套路由的用法. 嵌套路由就是父路由里面嵌套他的子路由,父路由有自己的路由导航和路由容器(router-link.router-view),通过配置children可实现多层嵌套.(router-view必须要有,否则点击了router-link后,路径会变化,但页面不改变). 使用场景 嵌套路由用于实现页中页效果.例如: 用户页面中,有登录页面和注册页面,这

  • 深入理解vue路由的使用

    深入理解vue路由的使用

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版. 乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-w

随机推荐