-
2022-03-31 15:46:15
1.声明式导航router-link
// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name
1.2
<router-link :to="{name:'home', params: {id:1}}"> <router-link :to="{name:'home', query: {id:1}}"> <router-link :to="/home/:id"> //传递对象 <router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>
2.编程式导航 this.$router.push()
不带参数 this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'} 带参数 query传参 1.路由配置: name: 'home', path: '/home' 2.跳转: this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:'1'}}) 3.获取参数 html取参: $route.query.id script取参: this.$route.query.id
3.params传参
1.路由配置: name: 'home', path: '/home/:id'(或者path: '/home:id') 2.跳转: this.$router.push({name:'home',params: {id:'1'}}) 注意: // 只能用 name匹配路由不能用path // params传参数(类似post) 路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失 3.获取参数 html取参:$route.params.id script取参:this.$route.params.id
4.直接通过path传参
1.路由配置: name: 'home', path: '/home/:id' 2.跳转: this.$router.push({path:'/home/123'}) 或者: this.$router.push('/home/123') 3.获取参数: this.$route.params.id
5.this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数
6.跳转页面打开新窗口并携带参数
const routeData = this.$router.resolve({ path: `/workbench/customer_detail/${this.audioFrom.import_id}` }) window.open(routeData.href, '_blank')
7.跳转新项目并携带参数
window.open(`https://hao123/#/workbench/customer_detail/${this.audioFrom.import_id}`)
更多相关内容 -
Vue路由跳转原理(哈希模式)
2019-10-12 05:56:55概述 哈希模式(利用`hashchange` 事件监听 url的hash 的改变...核心是锚点值的改变,我们监听到锚点值改变了就去局部改变页面数据,不做跳转。跟传统开发模式url改变后 立刻发起请求,响应整个页面,渲染整个页面...概述
哈希模式(利用`hashchange` 事件监听 url的hash 的改变)
```
window.addEventListener('hashchange', function(e) {
console.log(e)
})
```
核心是锚点值的改变,我们监听到锚点值改变了就去局部改变页面数据,不做跳转。跟传统开发模式url改变后 立刻发起请求,响应整个页面,渲染整个页面比路由的跳转用户体验更好
代码
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="#/login">登录</a> <a href="#/register">注册</a> <div id="app"></div> <script type="text/javascript"> var appdiv=document.getElementById('app') window.addEventListener('hashchange', function(e) { console.log(location.hash) switch(location.hash){ case '#/login': appdiv.innerHTML='我是登录页面'; break; case '#/register': appdiv.innerHTML='我是注册页面'; break; } }) </script> </body> </html>
运行效果
-
详解vue 路由跳转四种方式 (带参数)
2020-12-29 05:02:421. router-link ...// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 2.带参数 // params传参数 (类似post) // 路由配置 path: /home/:id 或者 path: /home:id -
Vue路由跳转问题记录详解
2020-08-30 06:18:16本篇文章主要介绍了Vue路由跳转问题记录详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
vue路由拦截及页面跳转的设置方法
2020-08-27 10:57:22主要介绍了vue路由拦截及页面跳转的设置方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 -
vue相同路由跳转强制刷新该路由组件操作
2020-10-14 23:34:47主要介绍了vue相同路由跳转强制刷新该路由组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue 实现路由跳转时更改页面title
2020-10-16 01:34:23今天小编就为大家分享一篇vue 实现路由跳转时更改页面title,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue2.0项目实现路由跳转的方法详解
2020-11-30 17:40:521、安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2、vue项目引入vue-ruoter: 二、应用 1、路径配置(页面跳转): 方法一:如果切换的页面不... -
vue路由跳转传递参数的方式总结
2020-10-15 08:25:10在本篇文章和里小编给各位总结了关于vue路由跳转传递参数的三种方式以及相关代码,需要的朋友们可以学习下。 -
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2020-10-18 04:14:30今天小编就为大家分享一篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue页面跳转实现页面缓存操作
2020-11-20 04:38:27在路由里面设置需要缓存的页面 第二步 使用keep-alive属性包裹需要缓存的页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的 第三步 在需要缓存的页面设置导航钩子,在A野区离开时将值设置为false保证... -
vue路由跳转时判断用户是否登录功能的实现
2020-08-29 00:45:27下面小编就为大家带来一篇vue路由跳转时判断用户是否登录功能的实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
vue子路由跳转实现tab选项卡
2020-10-16 15:58:05主要为大家详细介绍了vue子路由跳转实现tab选项卡,完成一个简单的tab选项卡布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
vue路由跳转以及路由传参&接收
2022-03-29 12:39:44路由跳转 1.声明式路由跳转 (不带参数) 通过router-link标签进行跳转,使用name或者path都可以,在dom结构中会被渲染成a标签 注意:router-link中链接如果是’/‘开始就是从根路由开始,如果开始不带’/’,则从...路由跳转
1.声明式路由跳转
(不带参数)
通过
router-link
标签进行跳转,使用name
或者path
都可以,在dom
结构中会被渲染成a
标签
注意:router-link
中链接如果是’/
‘开始就是从根路由开始,如果开始不带’/
’,则从当前路由开始。<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}">
(带参数)
注意:
params
传参数 (类似post
)
路由配置path: "/home/:id"
不配置path
,路由跳转可请求,刷新页面传递的参数会丢失,
配置path
,刷新也买你id会被保留<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">
获取路由跳转传递的参数:
html
通过$route.params.id
,script
通过this.$route.params.id
2.编程式路由跳转
1.字符串形式
router.push('home')
2.对象形式
router.push({ path: 'home' }) router.push({ name: 'user'})
3.函数内调用
(不带参数)this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'})
(
query
传参)this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:'1'}})
html
取参$route.query.id
script
取参this.$route.query.id
(params
传参)
只可以使用name
this.$router.push({name:'home',params: {id:'1'}})
html
取参$route.params.id
,script
取参this.$route.params.id
3.
query
和params
的区别query
类似get
, 跳转之后页面url
后面会拼接参数,类似?id=1
, 非重要性的可以这样传, 密码之类还是用params
刷新页面id还在params
类似post
, 跳转之后页面url
后面不会拼接参数 , 但是刷新页面id
会消失 -
Vue路由的跳转和传参
2021-06-22 15:32:18Vue路由跳转的两种方式、路由传参的两种方式 -
解决vue+router路由跳转不起作用的一项原因
2020-11-20 02:20:13如下所示: Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, ...补充知识:vue-router配置后地址栏输入跳转不 -
vue路由跳转传参的几种方式
2022-04-07 14:20:16需求是跳转至工单申请详情页面 vue.js中路由配置代码: import Layout from '@/layout' const repairRouter = { path: '/repair', component: Layout, alwaysShow: true, name: 'repair', meta: { title: ...需求是跳转至工单申请详情页面
vue.js中路由配置代码:
import Layout from '@/layout' const repairRouter = { path: '/repair', component: Layout, alwaysShow: true, redirect: '/repair/my-repair-order', name: 'repair', meta: { title: '工单管理', icon: 'clipboard', perms: ['repair'] }, children: [ { path: 'create-repair', name: 'createRepair', hidden: true, component: () => import('@/views/process/repair/repairCreate.vue'), meta: { title: '新建工单申请', perms: ['create-repair'] } }, { path: 'my-repair-order', name: 'myRepairOrder', noShowingChildren: true, component: () => import('@/views/process/repair/myRepairOrder.vue'), meta: { title: '我申请的工单', perms: ['repair-order'] } }, { path: 'repair-order-detail', name: 'repairOrderDetail', component: () => import('@/views/process/repair/myRepairOrderDetail.vue'), meta: { title: '工单申请详情', perms: ['repair-order-detail'], hidden: true } } ] } export default repairRouter
1.this.$router.push() (函数里面调用)
1. 不带参数
this.$router.push('/repair/repair-order-detail') this.$router.push({name:'repairOrderDetail'}) this.$router.push({path:'/repair/repair-order-detail'})
2. query传参
参数为属性值: //其中参数deviceId可以加'',也可以不加 this.$router.push({name:'repairOrderDetail',query: {deviceId: row.id}}) this.$router.push({path:'/repair/repair-order-detail',query: {deviceId: row.id}}) 参数为对象: //其中参数data可以加'',也可以不加 this.$router.push({name:'repairOrderDetail',query: {data: row}}) this.$router.push({path:'/repair/repair-order-detail',query: {data: row}}) // html 取参 $route.query.deviceId/data // script 取参 this.$route.query.deviceId/data
3. params传参
参数为属性值: //其中参数deviceId可以加'',也可以不加 this.$router.push({name:'repairOrderDetail',params: {deviceId: row.id}}) 参数为对象: //其中参数data可以加'',也可以不加 this.$router.push({name:'repairOrderDetail',params: {data: row}}) //此处只能用name,用path接收不到参数 // 路由配置 path: "/repair-order-detail/:id" 或者 path: "/repair-order-detail:id" , // 不配置path ,第一次可请求,刷新页面id会消失 // 配置path,刷新页面id会保留 //参数为对象时原理同上,但是要注意,对象传参的话,需要先JSON.stringify(row)处理之后再传,否则再次刷新会丢失数据 // html 取参 $route.params.id // script 取参 this.$route.params.id
query和 params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失4. 直接路径传参
// 此时路由必须配置为 path: "/repair-order-detail/:id" // 不能为 path: "/repair-order-detail:id" 或者 "/repair-order-detail"会报400错误 this.$router.push(`/repair/repair-order-detail/${row.id}`) this.$router.push('/repair/repair-order-detail/' + row.id) this.$router.push(`/repair/repair-order-detail/` + row.id) //此处也可以传对象,但是传对象之前需要将对象转成JSON格式的字符串 // html 取参 $route.params.id // script 取参 this.$route.params.id
2.this.$router.replace() (用法同上,push)
3.this.$router.go(n)
this.$router.go(n) 向前或者向后跳转n个页面,n可为正整数或负整数
VUE几种路由跳转几种方式的区别
this.$router.push:跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面
this.$router.replace:跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)
this.$router.go(n):向前或者向后跳转n个页面,n可为正整数或负整数
-
vue路由跳转的四种方法
2021-11-26 11:54:42vue路由跳转有四种方式 router-link this.$router.push() (函数里面调用) this.$router.replace() (用法同push) this.$router.go(n) 一、不带参 1.1 router-link <router-link :to="{name:'home'}">... -
Vue 路由 跳转【返回、刷新、跳转】
2022-03-23 00:37:53Vue 路由 跳转【返回、刷新、跳转】this.$router.go(-1)this.$router.back()this.$router.pushthis.$router.replace this.$router.go(-1) 原页面表单中的内容会丢失; 向前或者向后跳转n个页面,n可为正整数或负整数... -
Vue实现路由跳转和嵌套
2020-08-30 04:59:32本篇文章主要介绍了Vue实现路由跳转和嵌套,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
解决vue 路由变化页面数据不刷新的问题
2020-08-27 21:08:44下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue路由跳转传参数的方法
2020-12-29 04:05:13vue中路由跳转传参数有多种,自己常用的是下面的几种 ... 通过编程导航进行路由跳转 1. router-link > 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航 2. p -
vue路由对不同界面进行传参及跳转的总结
2020-10-17 03:14:08主要介绍了vue路由对不同界面进行传参及跳转的总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
vue 路由跳转页面不刷新
2022-04-18 13:09:35<!-- 添加:key="$route.fullPath"防止同路由页面不刷新问题 --> <router-view :key="$route.fullPath"></router-view> 在router-view 里边添加 :key=“$route.fullPath” -
vue中路由跳转不计入history的操作
2020-10-14 18:14:03主要介绍了vue中路由跳转不计入history的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
Vue.js实战之利用vue-router实现跳转页面
2020-11-30 19:35:23使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html ... -
解决vue单页路由跳转后scrollTop的问题
2020-10-18 02:32:28今天小编就为大家分享一篇解决vue单页路由跳转后scrollTop的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧