我已经制作了一个 Vue CLI 项目,然后开始制作我的项目。
我制作了以下名为 的组件Navigation.vue
:
<template>
<nav>
<div class="nav_container">
<a href="https://www.metrici.ro/" target="_blank" class="logo"></a>
<ul>
<li><router-link to="/home">Home</router-link></li>
<li class="dropdown">
<a class="touch"
>Network Settings <i class="fas fa-angle-down"></i
><i class="fas fa-angle-up"></i
></a>
<div class="dropdown-content">
<router-link to="/dhcpIP">DHCP IP</router-link>
<router-link to="/staticIP">Static IP</router-link>
</div>
</li>
<!-- <li><router-link to="/files">Import/Export Files</router-link></li> -->
<li><router-link to="/update">Update</router-link></li>
</ul>
</div>
</nav>
</template>
<script>
export default {
name: 'Navigation',
}
</script>
<style scoped>
/* Some style */
</style>
Run Code Online (Sandbox Code Playgroud)
然后我将它导入App.vue
:
<template>
<div id="app">
<Navigation />
<router-view />
</div>
</template> …
Run Code Online (Sandbox Code Playgroud)