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

Posted GHUIJS

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以上是关于vue-router打开router-link的正确形式的主要内容,如果未能解决你的问题,请参考以下文章

vue-router 在新窗口打开页面的功能

Vue-router4 - 使用 <router-link :to> 传递对象不会传递动态数据

vue-router:如何禁用 router-link 的 css 的大纲属性作为

详解vue-router 2.0 常用基础知识点之router-link

vue-router的link样式设置问题

vue-router新窗口打开页面