vue获取当前路由

人气:111 ℃/2022-11-25 07:22:41

vue中应该如何获取当前路由?我们一起看看吧!

vue是一套用于构建用户界面的渐进式JavaScript框架。

vue 获取当前路由路径可以用

this.$route.path

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

获取完整url可以用

window.location.href

获取路由路径参数可以用

this.$route.params

vue中获取路由参数主要有两种方法:

第一种方法:通过query配置

this.$route.query

该方式的弊端在于,在页面间跳转可正常使用,如info、isTrue、func,但是在进行页面刷新时,所有参数值会转化为字符串,如对象info会转化为字符串'[Object Object]',布尔值isTrue会转化为'false',从而导致使用错误。

第二种方法:通过params配置

this.$route.params

params也可以携带任何任意类型的数据,在页面间跳转时,参数在地址栏不可见,可通过输入代码的方式获取,页面刷新后参数消失。

关于vue中应该如何获取当前路由,我们就了解到这啦!

vue获取当前路由路径

20 道必看的 Vue 面试题 | 原力计划

作者 | 红颜祸水nvn

责编 | 唐小引

出品 | CSDN 原力计划

1. 什么是 MVVM?

MVVM 是 Model-View-ViewModel 的缩写,MVVM 是一种设计思想。Model 层代表数据模式,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化为 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。

2. 父组件向子组件传值的方法?

父组件传递的数据子组件用 props 方法接收。

子组件通过两种方式接收:可以传递任何类型(数组,对象,各种数据类型等等)

详细介绍看这篇:Vue 父组件向子组件传值

https://blog.csdn.net/qq_34928693/article/details/80539350

3. 子组件向父组件传值的方法?

子组件向父组件传值用 this.$emit(key,value) ,父组件接收的时候需要在父组件中创建的子组件的标签中绑定 Key,格式:@Key=“方法名”,父组件声明这个方法,方法带参数,这个参数就是子组件传递的 Value。

详细介绍看这篇:Vue子组件向父组件传值

https://blog.csdn.net/sisi_chen/article/details/81635216

4. Vuex 是什么?哪种功能场景使用它?

Vuex 是专门为 Vue.js 设计的状态管理模式,它采用集中式储存管理 Vue 应用中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

当项目庞大的时候使用它:

5. Vuex 有哪几种属性?

6. 如何让 CSS 旨在当前组件中起作用?

当前组件的 < style>标签修改为< style scoped>

7. 请列举出3个 Vue 中常见的生命周期钩子函数。

8. Vue 生命周期总共有几个阶段?

9. 说出至少 4 种 Vue 当中的指令和它的用法?

10. vue-cli 工程中常用的 npm 命令有哪些?

11. 请说出 vue-cli 工程中每个文件夹和文件的用处。

12. vue-router 路由的两种模式。

# 后面的 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新浏览器,每次 hash 值的变化会触发 hashchange 事件。

利用了 HTML5 中新增的 pushState 和 replaceState 方法。这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

13. 如何解决 Vue 中的 ajax 跨域问题?

找到 config 文件夹中的 index.js 文件:

修改 proxyTable: {

'/api':{ //使用 /api 来代替 "http://localhost:8082"

target:'http://localhost:8082', //源地址

changeOrigin:true, //改变源

pathRewrite:{

'^/api':'http://localhost:8082' //路径重写

}

}

},

修改完之后的跨越请求就可以直接写成 /api/login 等等了。

14. Vue 打包命令是什么?Vue 打包后会生成哪些文件?

15. Vue 如何优化首屏加载速度?

16. scss 是什么?

SCSS 是 Sass 3 引入的新语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能,唯一不同之处是 SCSS 需要使用分号和花括号而不是换行和缩进,SCSS 对空白符号不敏感。

17. axios 是什么?怎么使用?

axios 是一个基于 promise 的 HTTP 库,可以发送 get,post 请求,正是由于 Vue、React 的出现,促使了 axios 轻量级库的出现

特定:

如何使用:

import Axios from 'axios'

Vue.propertype.$axios = Axios;

this.$axios.get('/user?stu_id=1002').then(function(resp) {

console.log(resp);

}).catch(function(err) {

console.log(err);

});

var params = new URLSearchParams;

params.append('name','孙悟空');

params.append('age',22);

let that = this;

this.$axios.post('http://localhost:8082/user',params).then(function(resp) {

console.log(resp.data.users);

that.ausers = data.data.users;

}).catch(function(err) {

console.log(err);

});

18. vue-router 是什么?它有哪些组件?

vue-router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

vue-router 组件:

19. 怎么定义 vue-router 的动态路由?怎么获取传递过来的动态参数?

在 router 目录下的 index.js 文件中,对 path 属性加上 /:id。使用 router 对象的 params.id,例如:this.$route.params.id。

20. MVVM 和其他框架 (jQuery)的区别是什么?哪些场景适合?

本文为CSDN博主「红颜祸水nvn」的原创文章,CSDN 官方经授权发布。

原文链接:https://blog.csdn.net/qq_43647359/article/details/104774302

欢迎更多的开发者朋友加入 CSDN 原力计划!我们将用全新的方式来释放更多的流量,让优质、有深度、丰富有趣的内容得到精准的流量扶持,同时也帮助创作者和粉丝有更多互动和交流。点击下方图片了解详情。

☞比尔·盖茨退出微软公司董事会;苹果 WWDC、微软 Build 大会均改为线上举办;Rust 1.42.0 发布| 极客头条

☞11 国股市熔断,“祸及”程序员?!

☞2.2版本发布!TensorFlow推出开发者技能证书

☞Soul App 高管被捕,恶意举报导致竞品被下架

☞2020 年最新版 68 道Redis面试题,20000 字干货,赶紧收藏起来备用!

☞最近一个名为 BTCU 的比特币分叉,准备用新分叉解决比特币网络的旧问题

推荐

首页/电脑版/网名
© 2026 NiBaKu.Com All Rights Reserved.