vue获取当前页面路由

最新推荐文章于 2024-05-09 12:15:21 发布
最新推荐文章于 2024-05-09 12:15:21 发布
阅读量2w 收藏 15
点赞数 9
分类专栏： VUE.JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangwqi/article/details/107916506
版权

获取当前页面路由

  • 完整url可以用 window.location.href
  • 路由路径可以用 this.$route.path
  • 路由路径参数 this.$route.params

判断当前路由不匹配时跳转

if(this.$route.path!='/Home'){
    this.$router.push({
        path:'/Home',
    })
}

vue $router和$route的区别

route相当于当前正在跳转的路由对象 可以从里面获取name,path,params,query等

打印this.$route和this.$router

前端杨小白
关注
  • 9
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中如何获取当前路由地址
weixin_43337481的博客
06-14 8721
结果：http://www.myurl.com:8866/test?一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。完成解析后的 URL，包含查询参数和 hash 的完整路径，即 “端口号/#” 之后的内容。结果：http://www.myurl.com:8866。9.window.location.hash（获取#之后的内容）7.window.location.search（请求的参数）1.window.location.href（当前URL）
vue获取当前激活路由的方法
08-27
"Vue 获取当前激活路由的方法" Vue.js 中获取当前激活路由的方法是非常重要的一项技术，今天我们将详细介绍如何获取当前激活路由的方法。 首先，我们需要了解什么是 Route 对象。在 Vue.js 中，Route 对象是指当前...
vue 路由判断
qq_61869009的博客
04-02 5669
解决的一个问题分享。我的需求是从特定的页面进入当前页面会执行一个定时器来增加阅读人数，当进入该页面15秒后浏览人数会增加1。 话不多说直接上代码。先在methods里定义一个定时器方法和一个修改浏览人数方法。 ​ methods: { // 增加阅读人数 setpeople(){ console.log('定时器开启'); // overTimer 这个值可以写在data里面 //也可以直接用 const overTi
前端vue如何根据菜单自动生成路由(动态配置前端路由)
最新发布
菜鸟教程
05-09 713
在需要权限控制的页面，往往存在根据用户来显示菜单的情况，单独根据用户类型判断显然不是很好，如果后面用户类型发生变化，项目修改维护可能就会比较麻烦，所以比较好的做法是根据后端返回的菜单动态生成页面路由，以达到完全权限控制的目的，并且若权限发生变化，仅需该配置数据即可。
VUE获取当前页面的路由
浩先生的博客
06-08 1441
当前页面 完整url可以用 window.location.href 路由路径可以用 this.$route.path 路由路径参数 this.$route.params 希望对大家有所帮助！加油呀!
vue获取上一个页面路由
热门推荐
Shuanger112的博客
12-06 3万+
在某种情况下，我们要获取上一个页面的路由地址 可以使用： vue-router的beforeRouterEnter钩子 其实也就是一个路由守卫 beforeRouteEnter(to, from, next) { next(vm=>{ // 这里的vm指的就是vue实例，可以用来当做this使用 console.log(to) consol...
【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法
慕白Lee的博客
09-27 1万+
在这个示例中，我们在组件的`data`选项中定义了一个`monitoredParam`属性，用于存储监控的参数值。当监控的参数发生变化时，`watch`函数会被触发，将新的参数值保存到组件的`monitoredParam`属性中。在这个示例中，我们在组件的`data`选项中定义了一个`monitoredRoute`属性，用于存储监控的路由信息。当路由发生变化时，`watch`函数会被触发，将新的路由信息保存到组件的`monitoredRoute`属性中。
解决vue 路由变化页面数据不刷新的问题
08-27
在Vue.js应用中，路由是页面之间导航的关键组成部分。然而，有时可能会遇到一个问题：当路由发生变化时，页面数据并未自动刷新。这种情况可能会影响用户体验，尤其是当你期望新路由加载时更新相应的数据。本篇文章将...
vue 实现路由跳转时更改页面title
12-13
一、router文件夹下的index文件中给每个path添加meta:{}： export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' ...二、js入口文件main.
vue离开当前页面触发的函数代码
11-19
补充知识：vue中进入路由页面和离开路由页面后执行函数 进入路由页面 mounted(){ this.$nextTick(()=>{ show(); }) } 离开路由页面后执行函数 destroyed: function () { console.log("我已经离开了！"); ...
Vue-router 检测路由的变化
weixin_42508745的博客
04-15 2515
Vue-router 检测路由的变化 问题 vue模块第一次router-link加载完毕了，再次router-link的时候希望向着这也页面传参，接收参数不知道从那接受，网上有很多，我用的是检测路由的变化。 当前url和点击router-link一样，但是参数不一样，地址栏中的地址已经改变了，然而并没有跳转路由 起因 组件已打开，再次跳转，是复用之前的组件，并不会出发之前的钩子函数。 点击侧边栏...
判断当前路由，指定组件显示与否
qq_39704803的博客
10-26 995
查看当前路由 {{this.$route.path}} 判断如果不是首页，则显示面包屑 <div class="breadcrumb-container" v-if="this.$route.path != '/home'"> <el-breadcrumb class="common-container" separator="/"> <el-breadcrumb-item :to="{ path: '/' }"&gt..
Vue笔记：Vue Router路由
七七的博客
09-26 706
vue-router路由 说明 学习的时候，尽量的打开官方的文档 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 安装 基于第一个vue-cli
vue获取前一个页面路由地址
qq_43248623的博客
03-01 4379
可以使用： vue-router的beforeRouterEnter钩子 其实也就是一个路由守卫 <script> export default { data() { return { fromPath: "", }; }, beforeRouteEnter(to, from, next) { next((vm) => { // 通过 `vm` 访问组件实例,将值传入fromPath vm.fromPath = fro
vue点击导航菜单，展示选中样式，菜单路由存在嵌套路由时也可以判断为当前路由
AKindofo的博客
06-02 526
【代码】vue点击导航菜单，展示选中样式，菜单路由存在嵌套路由时也可以判断为当前路由。
vue组件页面内获取上一页面路由并在组件页面内使用
weixin_43974247的博客
03-20 4596
beforeRouteEnter(to, from, next) { localStorage.setItem(‘backName’, from.name); next(); } this.backPathName = localStorage.getItem(‘backName’) 利用beforeRouteEnter获取上一页面路由，此时当前生命周期data还未初始化，借助localStora...
Vue之路由（Router）
伐木小屋
05-31 373
前言         在我们利用vue cli手脚架创建好项目后，针对vue的几个重要文件夹及文件、一些配置信息、语法和我在学vue时出现的一些问题做一个小结。 路由router          在做vue项目时你会发现，vue会将你写的一个个以vue结尾的文件组合起来，按照一定规则拼接到一起，其中，这个规则就是router（路由），说到底，路由就
vue获取当前页面的url路径
qq_43405603的博客
11-22 7854
完整url可以用 window.location.href 路由路径可以用 this.$route.path 路由路径参数 this.$route.params 例如：/user/:id → /user/2044011030 → this.$route.params.id 路由查询参数 this.$route.query 例如：/user/search?name=sf → this.$route.query.name 原文链接：https://blog.csdn.net/a350110085/articl.
vue3获取当前路由信息
09-06
在 Vue 3 中，你可以使用 `vue-router` 来获取当前路由信息。首先，确保你已经安装了 `vue-router`，然后按照以下步骤进行操作： 1. 在你的 Vue 3 项目中，创建一个路由实例，并配置路由表。例如，在 `router.js` 文件中： ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from './views/Home.vue'; const routes = [ { path: '/', name: 'Home', component: Home }, // 其他路由配置... ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` 2. 在你的主 `App.vue` 组件中，使用 `<router-view>` 标签来渲染当前路由对应的组件。 3. 在需要获取当前路由信息的组件中，可以通过 `$route` 访问当前路由的信息。例如，在一个名为 `MyComponent.vue` 的组件中，你可以使用 `$route` 来获取当前路由的路径、参数等信息。 ```javascript export default { mounted() { console.log(this.$route.path); // 当前路由路径 console.log(this.$route.params); // 当前路由参数 console.log(this.$route.query); // 当前查询参数 } } ``` 这样，你就可以在 Vue 3 中获取当前路由信息了。记得根据你的具体项目配置做出相应的调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值