<template>
  <nav>
    <router-link to="/"><span>Home</span></router-link>
    |
    <!--  v-bind绑定path参数  -->
    <router-link :to="{path:'/'}"><span>Home-path</span></router-link>
    |
    <!--  v-bind绑定name参数对应路由定义中的name  -->
    <router-link :to="{name:'home'}"><span>Home-name</span></router-link>
    |
    <router-link to="/about"><span>About</span></router-link>
    |
    <!--  带query参数，url地址格式： http://localhost:8080/about?id=1  -->
    <router-link :to="{path:'/about', query:{id:1}}"><span>About-query</span></router-link>
    |
    <!--  带params参数，url地址格式： http://localhost:8080/about/1/roger  -->
    <router-link :to="{name:'about-params', params:{id:'1',name:'roger'}}"><span>About-params</span></router-link>
    |
    <router-link to="/header"><span>Header-组合API</span></router-link>
    |
    <router-link :to="{name:'test'}"><span>Test-选项API</span></router-link>
  </nav>
  <router-view/>
</template>
<script setup>
import HeaderView from "@/views/HeaderView.vue";
</script>
