vue路由的钩子函数和跳转
首页可以控制导航跳转,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路由的钩子函数和跳转的更多相关文章
- VueRouter和Vue生命周期(钩子函数)
一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- vue之router钩子函数
模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...
- 【转】vue中的钩子函数。。
前言 在vue开发SPA应用的过程中,多数情况下我们需要解决一个问题 就是在路由跳转的过程中需要更新你SPA应用的 title , 这一节不说其他,就展示如何使用 vue-router 的 导航钩子 ...
- vue生命周期 钩子函数
首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...
- vue生命周期钩子函数详解
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35585701/article/ ...
- Vue -自定义指令&钩子函数
除了核心功能默认内置的指令,Vue也允许注册自定义指令 页面加载后,让文本框自动获取焦点,原生js做法是获取文本框元素后调用focus()方法,但Vue不建议手动操作DOM元素,所以此时要自定义指令 ...
- vue中的钩子函数的理解
接下来我们对几个钩子函数进行解释 beforeCreated:这个钩子函数实在vue实例创建后,触发的.这个时候还没有进行data里的数据监听和事件的初始化 其实大家很多时候都会在created钩子函 ...
- Vue系列之 => 钩子函数生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- H5-移动端实现滑屏翻页-原生js/jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Qt中的Q_D宏和d指针
_ZTS7QObject 一.Q_D的在文件中的提法 Q_D的设置意在方便地获取私有类指针,文件为qglobal.h.下面的##是宏定义的连字符.假设类名是A,那么A##Private翻译过来就是AP ...
- tp5阿里云短信发送
到阿里云下载php版demo,下完整版的,不是轻量级的; 框架 :TP5 把下载下来的文件放到extend里面 文件名:alimsg 里面的文件 import('alimsg.api_demo.Sm ...
- 关于ajax请求跨域问题
jQuery中的异步请求跨域的方法: xhrFields: {withCredentials: true} 当设置为 true时,表示允许跨域: false时,表示禁止跨域
- CentOS磁盘满了,导致磁盘无法写入,这么清理
输入命令 du -sh /* | sort -nr 会列出根目录文件夹的大小 看到哪个文件夹比较大 删除相应的缓存,重启服务器即可
- 解决PLSQL报错及配置InstantClient方法
某次,在使用PLSQ链接数据库的时候,出现了错误如下: 然后点击窗口上面的 工具 –> 首选项 –> Oracle –> 连接 ,然后看到这样的窗口: 用电脑根据上面的地址搜索不到 ...
- Linux跨服务器发送文件
在要发送的文件所在的目录下,输入下列命令 第一种: scp -r test.jar root@127.0.0.1:$(pwd)/test.jar 其中root为服务器账户名,127.0.0.1为要发送 ...
- CCF-模板生成系统-201509-3
主要是string---STL的运用 趁机整理一下erase, find, substr, replace, insert #include <bits/stdc++.h> using n ...
- python 在一个excel存多个sheet
import pandas as pdimport numpy as npimport osfrom sqlalchemy import create_engine def get_station_w ...
- js中的Call()和apply()
Call和apply,就是改变函数里面的this指向的方法. xxx.call()或xxx.apply() 特别强调下xxx必须是function,(普通函数,类,构造函数) var obj={ na ...