【Vue + Vuetify】 v-navigation-drawer를 고정 표시 그대로 링크 천이시키는 방법
17050 단어 vue-router프로그래밍 공부 일기Vue.jsVuetify
소개
여러분 안녕 안녕하세요.
엔지니어 경력 1년째, 현장 미경험의 약소 자칭 Web 엔지니어입니다.
이번에는 트위터 PC 버전처럼
사이드 네비게이션 바를 표시 한 채로 화면 전환
시행착오한 경위를 기록하려고 생각해 본 기사의 작성에 있던 나름입니다.
하고 싶은 일
먼저 결론에서 언급하면
루트의 설정을 중첩 구조로 하면 무사히 해결했습니다.
첫 번째 코드(실패 예)
특히 아무 생각 없이 구현하려고 했던 최초의 코드를 이하에 기재합니다.
App.vue
<template>
<v-app>
<v-main>
<router-view />
</v-main>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Main.vue
<template>
<div>
<SideNav />
<v-content>
<v-container fluid fill-height align-start justify-center>
<router-view />
</v-container>
</v-content>
</div>
</template>
<script>
import SideNav from '../components/SideNav.vue'
export default {
components: {
SideNav,
}
}
</script>
SideNav.vue
<template>
<v-navigation-drawer permanent absolute>
<v-list dense nav>
<v-list-item
v-for="item in items"
:key="item.title"
:to="item.link"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
data() {
return {
items: [
{title: 'ホーム', icon: 'mdi-home', link: {name: 'home'}},
{title: '通知', icon: 'mdi-bell', link: {name: 'notification'}},
{title: 'メール', icon: 'mdi-email', link: {name: 'email'}},
]
}
}
}
</script>
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
import Home from '../components/Home.vue'
import Notification from '../components/Notification.vue'
import Email from '../components/Email.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'main',
component: Main,
},
{
path: '/home',
name: 'home',
component: Home,
},
{
path: '/notification',
name: 'notification',
component: Notification,
},
{
path: '/email',
name: 'email',
component: Email,
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
↑GIF화상대로 링크를 클릭한 순간, 드로어가 사라져 버린다! !
링크처에 천이 자체는 되어 있는 것 같은데 왜…
시행착오의 경위
자신이 생각하는 드로어를 실장시키기 위해서는 어떻게 하면 좋을까.
졸인이 없는 머리를 비틀어 도출한 대처법은 이하의 3개.
① v-navigation-drawer 에 뭔가 그런 속성이 없나? ?
→ 문서 등을 읽고 잡은 한 발견되지 않았습니다.
② router-view 를 App.vue 에도 Main.vue 에도 쓰고 있는 것이 맛있지? ?
→ 명명 된 뷰는 방법이 나왔지만, 뭔가 이것도 다르다.
③ 중첩? 그렇다고 Home.vue 라든지 Main.vue 와 중첩 구조가 되어 있지 않을까?
→ 예감적 중이었습니다! !
경로 설정을 중첩
"홈 화면""통지 화면""메일 화면"
각각을 형성하는 Home.vue, Notification.vue, Email.vue는
Main.vue에 포함된 구성 요소입니다.
따라서 다음과 같이 경로 설정을 중첩 구조로 만듭니다.
목표로 하는 상태에 도달할 수 있었습니다.
router/index.jsimport Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
import Home from '../components/Home.vue'
import Notification from '../components/Notification.vue'
import Email from '../components/Email.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'main',
component: Main,
children: [
{ path: 'home', name:'home', component: Home },
{ path: 'notification', name:'notification', component: Notification },
{ path: 'email', name:'email', component: Email },
]
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
트라이 앤 에러있는 만 응고 ~.
참고 기사
<template>
<v-app>
<v-main>
<router-view />
</v-main>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
<template>
<div>
<SideNav />
<v-content>
<v-container fluid fill-height align-start justify-center>
<router-view />
</v-container>
</v-content>
</div>
</template>
<script>
import SideNav from '../components/SideNav.vue'
export default {
components: {
SideNav,
}
}
</script>
<template>
<v-navigation-drawer permanent absolute>
<v-list dense nav>
<v-list-item
v-for="item in items"
:key="item.title"
:to="item.link"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
data() {
return {
items: [
{title: 'ホーム', icon: 'mdi-home', link: {name: 'home'}},
{title: '通知', icon: 'mdi-bell', link: {name: 'notification'}},
{title: 'メール', icon: 'mdi-email', link: {name: 'email'}},
]
}
}
}
</script>
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
import Home from '../components/Home.vue'
import Notification from '../components/Notification.vue'
import Email from '../components/Email.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'main',
component: Main,
},
{
path: '/home',
name: 'home',
component: Home,
},
{
path: '/notification',
name: 'notification',
component: Notification,
},
{
path: '/email',
name: 'email',
component: Email,
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
자신이 생각하는 드로어를 실장시키기 위해서는 어떻게 하면 좋을까.
졸인이 없는 머리를 비틀어 도출한 대처법은 이하의 3개.
① v-navigation-drawer 에 뭔가 그런 속성이 없나? ?
→ 문서 등을 읽고 잡은 한 발견되지 않았습니다.
② router-view 를 App.vue 에도 Main.vue 에도 쓰고 있는 것이 맛있지? ?
→ 명명 된 뷰는 방법이 나왔지만, 뭔가 이것도 다르다.
③ 중첩? 그렇다고 Home.vue 라든지 Main.vue 와 중첩 구조가 되어 있지 않을까?
→ 예감적 중이었습니다! !
경로 설정을 중첩
"홈 화면""통지 화면""메일 화면"
각각을 형성하는 Home.vue, Notification.vue, Email.vue는
Main.vue에 포함된 구성 요소입니다.
따라서 다음과 같이 경로 설정을 중첩 구조로 만듭니다.
목표로 하는 상태에 도달할 수 있었습니다.
router/index.jsimport Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
import Home from '../components/Home.vue'
import Notification from '../components/Notification.vue'
import Email from '../components/Email.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'main',
component: Main,
children: [
{ path: 'home', name:'home', component: Home },
{ path: 'notification', name:'notification', component: Notification },
{ path: 'email', name:'email', component: Email },
]
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
트라이 앤 에러있는 만 응고 ~.
참고 기사
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
import Home from '../components/Home.vue'
import Notification from '../components/Notification.vue'
import Email from '../components/Email.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'main',
component: Main,
children: [
{ path: 'home', name:'home', component: Home },
{ path: 'notification', name:'notification', component: Notification },
{ path: 'email', name:'email', component: Email },
]
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
Reference
이 문제에 관하여(【Vue + Vuetify】 v-navigation-drawer를 고정 표시 그대로 링크 천이시키는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/u_i_vs_world/items/7adace8b418d93a67681텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
