VUE3.0中在新窗口打开页面的三种方式,vue路由中router与route的区别,query与params传参的区别

第一种:使用routerlink进行新窗口打开页面

<router-link tag="a" target="_blank" to="/test">第一种新窗口打开页面</router-link>

第二种: 使用window.open

import { useRouter } from 'vue-router' //引入useRouter
const router = useRouter();
 // 注册点击事件
 <button @click="openPage">这是第二种window.href</button>
 const href = router.resolve({ //使用resolve
      name:'test',    //这里是跳转页面的name
      path: '/test',
   })
  // 点击事件 
 const openPage = ()=>{
     window.open(href.href, '_blank')
  }

第三种使用a标签

<a class="target" href="http://www.baidu.com" target="_blank">第三种a标签</a>

vue中router与route的区别

Router 是全局的路由器对象(具有push、replace、go、back、forward等方法实现路由跳转)
Route是当前被激活的路由地址信息(包含fallpath、query等信息)
vue3.0中的引入

import { useRouter, useRoute } from 'vue-router'
setup() {
	const router = useRouter(); 
    const route = useRoute();
}

router还可以携带路由中的query(有两种方法).
传递参数方法一:
1、配置: 使用params,在路由表的path后面添加/:id参数.

 {
	path:'/home/:id',
	component:Home
},

2、获取: 在跳转后的页面上使用router.params.id或router.params.id进行获取

传递参数方法二:
配置: 在跳转的时候

 router.resolve({name:'/home',params:{id:1,name:'Dawn'}}) // resolve方法
 router.push({ // push方法
      path:'/test',    //这里是跳转页面的name
      query:{id: 5}
    })

2获取参数

 route.query.id // 获取参数query中的id
 route.query.name // 获取参数query中的name

总结:
query要用path来引入，params要用name来引入，接收参数都是类似的，
query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示