vue3 useRouter（跳转）, useRoute（获取路由参数） 的区别

Posted 2023-04-17

参考技术A useRouter（跳转）, useRoute（获取路由参数）
vue2.0一样注意区分

vue-router打开router-link的正确形式

<script setup lang="ts">
import  useRoute, useRouter  from "vue-router";
console.log(useRoute()); //返回当前路由地址。
console.log(useRouter()); //返回 router 实例。
</script>

<template>
  <!--  字符串-->
  <router-link to="/vue">vue</router-link>
  <router-link :to="'/vue'">vue</router-link>
  <router-link :to=" name: 'Vue' ">vue</router-link>

  <!--  传参-->
  <router-link :to=" name: 'Vue', params:  name: 'hg', age: '18'  ">
    路由传参
  </router-link>

  <router-link :to=" name: 'Vue', query:  name: 'g', age: '18'  ">
    路由传参
  </router-link>

  <router-link :to=" name: 'routerLink', query:  name: 'whg', age: '18'  ">
    路由传参(当前也测试),我们可以通过useRoute和useRouter拿到参数
  </router-link>

  <!--  插槽,得到目标路由的信息-->
  <router-link to="/vue" v-slot="a"> a </router-link>

<!--  -->
<!--    -->
<!--      route: -->
<!--        fullPath: "/vue",-->
<!--        path: "/vue",-->
<!--        query: ,-->
<!--        hash: "",-->
<!--        name: "Vue",-->
<!--        params: ,-->
<!--        matched: [-->
<!--          -->
<!--            path: "/vue",-->
<!--            redirect: -->
<!--              name: "Template",-->
<!--            ,-->
<!--            name: "Vue",-->
<!--            meta: ,-->
<!--            props: -->
<!--              default: false,-->
<!--            ,-->
<!--            children: [-->
<!--              -->
<!--                path: "template",-->
<!--                name: "Template",-->
<!--              ,-->
<!--              -->
<!--                path: "list",-->
<!--                name: "List",-->
<!--              ,-->
<!--              -->
<!--                path: "watch",-->
<!--                name: "Watch",-->
<!--              ,-->
<!--              -->
<!--                path: "component",-->
<!--                name: "Component",-->
<!--              ,-->
<!--              -->
<!--                path: "/communication",-->
<!--                name: "Communication",-->
<!--              ,-->
<!--              -->
<!--                path: "comUseTemplate",-->
<!--                name: "ComUseTemplate",-->
<!--              ,-->
<!--              -->
<!--                path: "useTemplate",-->
<!--                name: "UseTemplate",-->
<!--              ,-->
<!--              -->
<!--                path: "provide",-->
<!--                name: "Provide",-->
<!--              ,-->
<!--              -->
<!--                path: "asyncComp",-->
<!--                name: "AsyncComp",-->
<!--              ,-->
<!--            ],-->
<!--            instances: -->
<!--              default: null,-->
<!--            ,-->
<!--            leaveGuards: -->
<!--              "Set(0)": [],-->
<!--            ,-->
<!--            updateGuards: -->
<!--              "Set(0)": [],-->
<!--            ,-->
<!--            enterCallbacks: ,-->
<!--            components: -->
<!--              default: -->
<!--                __name: "index",-->
<!--                __hmrId: "52688a97",-->
<!--                __scopeId: "data-v-52688a97",-->
<!--                __file: "D:/work/ghstudy/src/views/vue3/index.vue",-->
<!--              ,-->
<!--            ,-->
<!--          ,-->
<!--        ],-->
<!--        meta: ,-->
<!--        href: "#/vue",-->
<!--      ,-->
<!--      href: "#/vue",-->
<!--      isActive: false,-->
<!--      isExactActive: false,-->
<!--    -->
<!--  -->
</template>