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

最新推荐文章于 2024-04-22 12:12:33 发布

GHUIJS

最新推荐文章于 2024-04-22 12:12:33 发布

阅读量329

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_43599959/article/details/127599622

版权

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