vue-router 인스턴스
<script src="https://unpkg.com/vue/dist/vue.js"/>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"/>
<style>
#app{
position: absolute;
}
router-link {position: absolute; }
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 16px 20px;
font-size: 30px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn{
background-color: blue;
}
.dropdown{
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div id="app">
<!-- router-link -->
<!-- `to` -->
<!-- <router-link> "<a>" -->
<router-link to="/left">Left</router-link>
<router-link to="/right">Right</router-link>
<!-- -->
<router-view/>
</div>
<script>
const Left = {template: '<div class="dropdown"><a href="#new" class="dropbtn"> </a><div class="dropdown-content"><a href="#"> </a><a href="#"> </a></div></div>',
data: function(){
return {
msg: 'How to use vue-router!'}
}
}
var Right = Vue.extend({
template: ' <div class="dropdown"><a href="#new" class="dropbtn"> </a><div class="dropdown-content"><a href="#"> </a><a href="#"> </a></div></div>'
})
const routes =[
{ path: '/left', component: Left },
{ path: '/right', component: Right }
]
var router = new VueRouter({
routes
})
var app = new Vue({
router
}).$mount('#app')
</script>
</code></pre>
<p> </p>
</div>
</div>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Java에서 현재 경로를 가져오는 몇 가지 방법 요약Java에서 현재 경로를 가져오는 몇 가지 방법 요약 1. 시스템을 이용한다.getProperty() 함수는 현재 경로를 가져옵니다. 2. File에서 제공하는 함수를 사용하여 현재 경로를 가져옵니다. File.ge...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
