vue3携带参数跳转并新建页面&&接收参数

 vue3携带参数跳转并新建页面&&接收参数 vue学习记录

//html
<div class="course_lay" 
      @click="courseDetail(item.id)">
      <img :src="item.image" alt="">      
</div>

//js
//创建新页面并跳转
    import { useRouter } from "vue-router";
    const router = useRouter()
    const courseDetail = (id) => {
        const newpage = router.resolve({
            path: '/tindex/tcourse/coursedetail',
            query: {  //用query传参刷新网页时参数不会丢失，用params传参刷新参数时会丢失参数
                id: id
            }
        })
        window.open(newpage.href, '_blank')
    }
//只是传参数跳转并不创建新页面
//router.push({
//    path: '/tindex/tcourse/coursedetail',
//    query: {
//        id: id
//    }
//})


//新页面接收参数js
import { useRoute } from "vue-router"//注意是useRoute
const route = useRoute()
console.log(route.query.id)//输出的即为接收到的参数

学习记录