vue路由信息对象

【vue路由信息对象】的更多相关文章

一个路由信息对象表示当前激活的路由的状态信息,每次成功的导航后都会产生一个新的对象. path字符串,对应当前路由的路径 params对象,包含动态路由参数 query对象,URL查询参数 hash字符串,当前路由的hash值 fullPath字符串,URL包含查询参数和hash的完整路径 matched数组,包含当前路由的所有嵌套路径片段的路由记录 name字符串,包含路由的名称 router-link配置项 tag='li':修改默认的a标签 exact:路径精确匹配全局activeCla…

路由信息对象Route之属性query和params的区别

query的使用第一步:在<router-link/>标签中配置如下 <router-link :to="{name:'beijing',query:{id:1,user:'lisi'}}">看电影</router-link> 第二步:在路由规则中配置(导航) {name:'beijing',path:'/beijing',component:BeiJing} 第三步:在路由对应的组件created函数中输出内容 this.$route //全…

vue路由传对象刷新会报错，数据丢失，用json字符串解决

变成json字符串,且加密 this.$router.push({name: response.body.PowerList[0].opPowerurl ,query :{ all: encodeURIComponent(JSON.stringify(response.body.all)), one: encodeURIComponent(JSON.stringify(response.body.one))}}); ----------------------------------------…

Vue路由获取路由参数

vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录</router-link> 通过query配置的路径显示如下: 2.通过params配置: <router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link> 通过qu…

vue路由高级语法糖

1.当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active. 模板中可以用{{$route.params.xxx取到路由参数}}或者{{$route.query取到参数}}或者{{$route.hash取到hash}} 实例中(js)可用:this.$route.params.xxx/this.$route.query.xxx取到路由参数: 2.通过$router 访问路由实例: .路由带参数: const userId =…

(转)一个vue路由参数传递的注意点

首先我的路由的定义 { path: '/b', name: 'B', component: resolve => require(['../pages/B.vue'], resolve) } 我从A组件跳转到B组件,并通过路由信息对象传递一些参数 this.$router.push({ path: '/b', params: { paramA: 'a' }, query:{ paramB: 'b' } }) 在B组件中获取参数 this.$route.query.paramB //b this.…