如何知道当前路由从哪个路由跳过来？（vue）

使用beforeRouteEnter

beforeRouteEnter (to, from, next) {/*
to:获取你要跳转的路由信息
from: 获取你从哪个路由来的信息
next: （放行函数）// 第一种写法
next(); // 直接放行
// 第二种
next('/url') //放行到指定的路由
*/console.log(from)console.log(next)
}

打印from,结果图：

为什么呢？因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来，所以打印from不能获取到来之前的路由。

beforeRouteEnter (to, from, next) {next(vm => {console.log(vm)})
}

next:下一步，这时候组件已经挂载了。
vm:是整个实例对象。

  beforeRouteEnter (to, from, next) {// console.log(from)next(vm => {console.log(from.path) // /})}

这时候就可以知道打印出来from，并且知道从哪里来的。

如何知道当前路由从哪个路由跳过来？（vue）相关推荐

阻止路由跳转得方式_vue路由拦截及页面跳转的设置方法
路由设置:router/index.js main.js: { if (to.matched.some(res => res.meta.requireAuth)) { // 验证是否需要登陆 i ...
vue-router同路由$router.push不跳转一个简单解决方案
vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...
vue监听路由的变化，跳转到同一个页面时，Url改变但视图未重新加载问题
vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题解决方法: 添加路由监听,路由改变时执行监听方法 methods:{fetchData(){console.log('路由发送 ...
路由之间的转跳及传参
跳转路由之间的转跳可以通过两种方式实现: 1.通过官方提供的router-link标签实现,它与a标签相似,给我们提供跳转到某个路由的功能. 用法: <router-link to=" ...
阻止路由跳转得方式_vue路由拦截及页面跳转设置的方法介绍
这篇文章主要介绍了vue路由拦截及页面跳转的设置方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下路由设置:router/index.jsexport default new Router ...
vue 当前路由重复点击跳转报错
当菜单路由重复点击时,会出现以下报错: 虽然没有什么影响(不知道深层有什么影响,页面运行反正没啥问题),但是有个报错看着就毕竟闹心. 有以下解决方案: router配置中添加代码块不再报错 // 解决 ...
Vue3（撩课学院）笔记07-vueRouter路由，创建路由，路由重定向，路由跳转，动态路由，路由懒加载，路由嵌套，路由参数穿传递的两种形式，通过事件来跳转路由
1.vueRouter路由的两种模式哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求历史模式:putstate()和replaceState()方法入 ...
vue3路由配置及路由跳转传参
1.安装路由 npm i vue-router 2.编写需要展示的路由在src目录下创建pages文件夹,里面创建两个vue文件命名为student.vue,person.vue 分别编写两个vue ...
vue——路由之路由跳转、路由传参、路由嵌套、路由模式
相关认识: 后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 ...
vue路由，父子路由跳转，父页面隐藏
1. 路由配置子路由的path不要加/ showfater用于显示隐藏父路由内容 {path:"/index",component:Index,name:"index& ...

如何知道当前路由从哪个路由跳过来？（vue）

使用beforeRouteEnter

如何知道当前路由从哪个路由跳过来？（vue）相关推荐

最新文章

热门文章