首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

  • beforeEach主要有3个参数to,from,next。

  • to:route即将进入的目标路由对象。

  • from:route当前导航正要离开的路由。

  • next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

跳转其他页面

<router-link  :to="{path: 'yourPath', params: { name: 'name', dataObj: data},query: {name: 'name', dataObj: data}}"></router-link>


1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
2. params -> 是要传送的参数,参数可以直接key:value形式传递
3. query -> 是通过 url 来传递参数的同样是key:value形式传递

// 2,3两点皆可传递

<template>
  <button @click="sendParams">传值</button>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      msg: 'test message'
    }
  },
methods: {
  sendParams () {
    this.$router.push({
      path: 'yourPath',
      name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',
      params: {
      name: 'name',
      dataObj: this.msg
      }
    })
  }
},

}
</script>
<style scoped></style>

<template>
  <h3>msg</h3>
</template>
<script>
  export default {
    name: '',
    data () {
      return {
        msg: ''
      }
    },
methods: {
  getParams () {
    // 取到路由带过来的参数
    let routerParams = this.$route.params.dataobj
    // 将数据放在当前组件的数据内
    this.msg = routerParams
  }
},
watch: {
  // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
  '$route': 'getParams'
  }
}
</script>
<style scoped></style>

$route和$router的区别

  $route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。

vue路由的钩子函数和跳转的更多相关文章

  1. VueRouter和Vue生命周期(钩子函数)

    一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...

  2. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  3. vue之router钩子函数

    模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...

  4. 【转】vue中的钩子函数。。

    前言 在vue开发SPA应用的过程中,多数情况下我们需要解决一个问题 就是在路由跳转的过程中需要更新你SPA应用的 title , 这一节不说其他,就展示如何使用 vue-router 的 导航钩子  ...

  5. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  6. vue生命周期钩子函数详解

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35585701/article/ ...

  7. Vue -自定义指令&钩子函数

    除了核心功能默认内置的指令,Vue也允许注册自定义指令 页面加载后,让文本框自动获取焦点,原生js做法是获取文本框元素后调用focus()方法,但Vue不建议手动操作DOM元素,所以此时要自定义指令 ...

  8. vue中的钩子函数的理解

    接下来我们对几个钩子函数进行解释 beforeCreated:这个钩子函数实在vue实例创建后,触发的.这个时候还没有进行data里的数据监听和事件的初始化 其实大家很多时候都会在created钩子函 ...

  9. Vue系列之 => 钩子函数生命周期

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. H5-移动端实现滑屏翻页-原生js/jquery

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Qt中的Q_D宏和d指针

    _ZTS7QObject 一.Q_D的在文件中的提法 Q_D的设置意在方便地获取私有类指针,文件为qglobal.h.下面的##是宏定义的连字符.假设类名是A,那么A##Private翻译过来就是AP ...

  3. tp5阿里云短信发送

    到阿里云下载php版demo,下完整版的,不是轻量级的; 框架  :TP5 把下载下来的文件放到extend里面 文件名:alimsg 里面的文件 import('alimsg.api_demo.Sm ...

  4. 关于ajax请求跨域问题

    jQuery中的异步请求跨域的方法: xhrFields: {withCredentials: true} 当设置为  true时,表示允许跨域: false时,表示禁止跨域

  5. CentOS磁盘满了,导致磁盘无法写入,这么清理

    输入命令 du -sh /* | sort -nr 会列出根目录文件夹的大小 看到哪个文件夹比较大 删除相应的缓存,重启服务器即可

  6. 解决PLSQL报错及配置InstantClient方法

    某次,在使用PLSQ链接数据库的时候,出现了错误如下: 然后点击窗口上面的 工具 –> 首选项 –> Oracle –> 连接 ,然后看到这样的窗口: 用电脑根据上面的地址搜索不到 ...

  7. Linux跨服务器发送文件

    在要发送的文件所在的目录下,输入下列命令 第一种: scp -r test.jar root@127.0.0.1:$(pwd)/test.jar 其中root为服务器账户名,127.0.0.1为要发送 ...

  8. CCF-模板生成系统-201509-3

    主要是string---STL的运用 趁机整理一下erase, find, substr, replace, insert #include <bits/stdc++.h> using n ...

  9. python 在一个excel存多个sheet

    import pandas as pdimport numpy as npimport osfrom sqlalchemy import create_engine def get_station_w ...

  10. js中的Call()和apply()

    Call和apply,就是改变函数里面的this指向的方法. xxx.call()或xxx.apply() 特别强调下xxx必须是function,(普通函数,类,构造函数) var obj={ na ...