TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
118篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue,vue3 打开新页面,页面跳转。vue跳转到一个新页面。vue路由传参
3099
人阅读
2020/10/19 19:16
总访问:
3839418
评论:
0
收藏:
0
手机
分类:
前端
[TOC] ### VUE页面跳转 本地页面跳转 ``` goApplicationCenter() { //进行页面跳转 let path = "/application-center" this.$router.push(path) }, ``` 跳转到新页面: ``` //进行页面跳转 let path = "/#/user/index/myfeedback" window.open(path, '_blank') ``` ### VUE使用this.$router.resolve打开新页面 代码如下: ``` detail(id){ let page = this.$router.resolve({ name:'chatmain', //这里是跳转页面的name query:{ id:id, //要传的参数。如果有参数需要传递可以这样使用 name:'aa' } }) window.open(page.href,'_blank') //打开新的页面 }, ``` 名字就是路由里边配置的名字: ![](https://img.tnblog.net/arcimg/aojiancc2/ffac2b3fc474426facbefdc72ca2cc82.png) ### VUE3实现页面跳转 ``` <script setup> import { useRouter } from 'vue-router' const router = useRouter() const buttonGoAbout = () => router.push('/about') </script> ``` 跳转的时候使用名字也可以: ``` const buttonGoAbout = () => mRouter.push({ name: 'About' }) ``` ### VUE3页面跳转的时候传递参数 #### 跳转前传递参数 ``` <script setup> import { useRouter } from 'vue-router' const router = useRouter() // 普通跳转 router.push('/index') // 使用 path、name 跳转都行 // query 参数 router.push({ path: '/index', query: { id: 1, name: 'a' } }) // params 参数 router.push({ name: 'index', params: { id: 2, name: 'j' } }) </script> ``` #### 跳转后获取参数 ``` <script setup> import { useRouter } from "vue-router" const router = useRouter() console.log(router.currentRoute.value.query) console.log(router.currentRoute.value.params) </script> ``` 也可以使用这种方式获取 ``` import { useRoute } from 'vue-router' export default { setup() { const route = useRoute() console.log(route.params) console.log(route.query) } } ``` ### vue路由传参数 先要在路由的地方配置,比如: ``` { path: '/tiaozhn/:id', name: 'tiaozhn', component: tiaozhn }, ``` 跳转的时候: ``` function go() { var id = 1; proxy.$router.push('/tiaozhn/' + id) } ``` 获取参数: ``` console.log(route.params.id); ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}