useRoute和useRouter

一.说明

        1.useRoute可用于路由传参获取值

import { useRoute } from 'vue-router';

        2.useRouter可用于编程式路由

import { useRouter } from 'vue-router';

二.使用方式

        1.useRoute:

        在router.js文件中,这里的:id是作为路由路径的参数

const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/addRouter/:id',
            component:addRouter
        }
    ]
})

        在APP.vue文件中:"路径传参"是传递参数

<router-link to="/addRouter/路径传参">Test</router-link>

        在addRouter.vue中接受参数:通过useRoute()创建一个对象,通过对象名.params.参数名来取出路径参数

 import { useRoute } from 'vue-router';
 const myRoute = useRoute()
 let myID = ref("")
 myID.value = myRoute.params.id

       

        2.useRouter:

        导入useRouter后,通过useRouter()来创建一个对象,通过对象名.push("/路径名")实现路由跳转

import { useRouter } from 'vue-router';
const myRouter = useRouter()
function showList(id) {
  myRouter.push(/addRouter)
}

        

本人文章作为个人学习记录,非专业性教学文章,如有错误请多谅解