vue，vue3 打开新页面，页面跳转。vue跳转到一个新页面。vue路由传参，vue3路由传参，vue3 获取路由参数

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);