vue，vue3 打开新页面，页面跳转。vue跳转到一个新页面。vue路由传参，vue3路由传参，vue3 获取路由参数 电脑版发表于：2020/10/19 19:16 [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') //打开新的页面 }, ``` 名字就是路由里边配置的名字：  ### 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); ```
