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-router4 - 使用 <router-link :to> 传递对象不会传递动态数据
vue-router:如何禁用 router-link 的 css 的大纲属性作为