Vue 中 route.path 和 route.fullPath 的区别

最新推荐文章于 2024-04-03 15:42:41 发布
最新推荐文章于 2024-04-03 15:42:41 发布
阅读量2.8k 收藏 2
点赞数
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_68155756/article/details/131716281
版权

  route.path和route.fullPath是Vue Router中route对象的两个属性，用于获取当前路由的路径信息，区别如下：

     1. route.path 只包含从基本URL后开始的路径，假设基本URL（base URL）为 /app，并且当前路由为 /app/home?a=1，那么route.path的值将是 /home；

  2.route.fullPath 包含从基本URL后开始的路径，假设基本URL（base URL）为 /app，并且当前路由为 /app/home?a=1，那么route.path的值将是 /home?a=1；

 如：

//路径：http://127.0.0.1:3000/home?a=1
console.log(route.path)// 输出 /home
console.log(route.fullPath)// 输出 /home?a=1

钱端工程师
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue路由对象属性 .meta $route.matched详解
12-13
$route.fullPath 1 路由是：/path/:type真正路径是：/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAu
vue.js和vue.min.js
06-13
vue.js和vue.min.js
Vue中this.$router.push参数获取方法
11-26
传递参数的方法： 1.Params 由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数：   通过name获取页面，传递params：   在目标页面通过this.$route.params获取参数：   2.Query 页面通过path和query传递参数，该实例中row为某行表格数据 在目标页面通过this.$route.query获取参数： this.$route.query.row.xxx 以上这篇
router-view :key=“$route.fullPath“
最新发布
Ryan-Yu的博客
04-03 450
是Vue Router提供的一个特殊的组件，它的作用是根据当前浏览器的URL路由来决定显示哪个组件的内容。它使得您可以在Vue.js应用中实现单页应用的路由功能，从而根据不同的URL显示不同的页面内容，而无需每次加载新的HTML页面。这样做的好处是可以确保在路由切换时，旧的组件实例被销毁，新的组件实例被创建，从而避免了可能出现的因为路由切换而导致的组件状态混乱或不更新的问题。组件的key值，我们可以告诉Vue.js在每次路由切换时，都要将对应的组件视为一个新的组件来处理，而不是复用之前的组件实例。
this.$route.fullpath
qq_44743216的博客
07-19 2389
this.$route.fullpath
Vue学习笔记---Vue Router
qq_44242707的博客
09-10 115
Html配置 < router-link to=“link” >：路由链接，对应path < router-view name=“可选” >：路由匹配渲染目标，对应path指向的组件 常规路由配置 path：路径 name：路径命名 component：路径对应的组件 children：路径嵌套路由 路由定义 1、动态路由： path:'/user/:id'：通过this.\$route.params.id获取id path: '/user-*'：通过his.\$route
vue：基础：路由
1363648943的专栏
09-05 2279
vue路由、watch、router
还不知道router-view中的key=‘$route.fullPath‘吗
...
10-05 2891
router-view中的key='$route.fullPath'
Vue-router中path的设置
五花漏的博客
02-16 2009
Vue-router配置项
路由跳转后this.$route.path的变化
haohaoxueqd的博客
11-07 1673
route.path变化
$route 和 $router 的区别
qg2276879379的博客
09-24 1374
$route 和 $router 的区别 $route $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 1、$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。 2、$route.params 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。 3.$route.query 一个 key/value 对象，表示 URL 查询参数。 例如
vue - vue.config.js中devServer配置方式
10-16
今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之...4. 全局混入：使用 `Vue.mixin` 可以在所有组件中混入指定的选项。 5. 全局过滤器：使用 `Vue.filter` 可以定义全局过滤器。 6. 全局插件：使用 `Vue.use` 可以注册
element、ant design、es6、echarts、vue.js、vueX、vue Route...等 离线包
07-12
element、ant design、es6、echarts、vue.js、vueX、vue Route、vue CLl 离线资源包，可用于开发内网环境，这是前端离线文件包。
vue.min.js官方2.6.14版本
03-11
vue.min.js官方2.6.14版本
在Vue中使用this.$store或者是$route一直报错的解决
10-16
今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
route_path分析
aningxiaoxixi的博客
06-28 863
vue3 路由routerpath后面直接携带参数传递
红烧咸咸鱼
02-01 655
vue3 路由router path后面直接携带参数传递
令人眼前一亮的 Vue 实战技巧
汉堡请不要欺负面条
06-23 377
minxin 让组件复用灵活化 Vue 提供了 minxin 这种在组件内插入组件属性的方法，个人建议这货能少用就少用，但是有个场景则非常建议使用 minxin：当某段代码重复出现在多个组件中，并且这个重复的代码块很大的时候，将其作为一个 minxin 常常能给后期的维护带来很大的方便。 这是项目中封装一个列表功能，有下拉刷新，加载自动请求数据，上拉加载下一页数据等等，它是这样的 看不懂没关系我只是开发中举了一个例子 export default { data() { return {
vue使用config.js配置全局axios路由
05-20
要在Vue项目中全局配置axios和路由，可以按照以下步骤进行： 1. 安装axios和vue-router ``` npm install axios vue-router --save ``` 2. 在src目录下创建一个config.js文件，用于存放全局配置 ```javascript import axios from 'axios' import router from '../router' // axios配置 axios.defaults.baseURL = 'http://localhost:3000' axios.defaults.timeout = 5000 // 请求拦截器 axios.interceptors.request.use( config => { // 如果有token则添加到请求头中 if (localStorage.token) { config.headers.Authorization = localStorage.token } return config }, error => { return Promise.reject(error) } ) // 响应拦截器 axios.interceptors.response.use( response => { // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 // 否则的话抛出错误 if (response.status === 200) { return Promise.resolve(response) } else { return Promise.reject(response) } }, error => { if (error.response.status) { switch (error.response.status) { // 401: 未登录 // 未登录则跳转登录页面，并携带当前页面的路径 // 在登录成功后返回当前页面，这一步需要在登录页操作。 case 401: router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) break // 403 token过期 // 登录过期对用户进行提示 // 清除本地token和清空vuex中token对象 // 跳转登录页面 case 403: alert('登录过期，请重新登录') // 清除token localStorage.removeItem('token') // store.commit('loginSuccess', null) setTimeout(() => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) }, 1000) break // 404请求不存在 case 404: alert('网络请求不存在') break // 其他错误，直接抛出错误提示 default: alert(error.response.data.message) } return Promise.reject(error.response) } } ) export default axios ``` 3. 在main.js中引入config.js文件，并将axios和router挂载到Vue.prototype上 ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import axios from './config' Vue.config.productionTip = false Vue.prototype.$axios = axios Vue.prototype.$router = router new Vue({ router, render: h => h(App), }).$mount('#app') ``` 现在可以在Vue项目的任何地方使用axios和router了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值