vue router 학습 의 동적 경로 와 내장 경로 에 대한 상세 한 설명
본 논문 의 읽 기 전 제 는 vue 프론트 프로그램 을 구축 하고 실행 할 수 있다 는 것 이다.만약 에 건축 이 있다 면 참고 할 수 있 는 글 이 있 습 니 다.
https://www.jb51.net/article/111650.htm
네,밑 에 상품 을 올 리 겠 습 니 다.
우선 동적 루트 를 소개 하 겠 습 니 다.
동적 경로 가 제 이해 에 따 르 면 페이지 의 점프 를 할 수 있 습 니 다.예 를 들 어 아래 의 이 페이지 에서:
<template>
<div id="app">
<header>
<router-link to="/">/</router-link>
<router-link to="/hello">/hello</router-link>
<router-link to="/cc">/cc</router-link>
</header>
<router-view style="border: 1px solid red"></router-view>
</div>
</template>
/hello 를 누 르 면 router-view 에 해당 하 는 모듈,즉 경로 에 설 치 된 모듈 을 불 러 옵 니 다.
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Foo from '@/components/Foo'
import Foo2 from '@/components/Foo2'
import Foo3 from '@/components/Foo3'
Vue.use(Router)
export default new Router({
routes: [
{path: '/', redirect: '/hello'},
{
path: '/hello',
component: Hello,
children: [
{path: '/hello/foo', component: Foo},
{path: '/hello/foo2', component: Foo2},
{path: '/hello/foo3', component: Foo3}
]
},
{
path: '/cc',
name: 'Foo',
component: Foo
}
]
})
Hello 와 Foo 라 는 두 구성 요소 로 넘 어 가 는 것 이다.그렇다면 포 함 된 길 은 무슨 뜻 일 까?처음에 나 는 이렇게 생각 했다./hello/foo 와/hello/foo 2 두 길 은 포 함 된 길 로 간략하게 쓸 수 있 지만 사실은 그렇지 않다.플러그 인 루트 는 하위 구성 요소 에 다시 플러그 인 구성 요소 만 있 습 니 다.그리고 루트 를 사용 하여 점프 를 합 니 다.이렇게 점프 를 할 때 변 화 된 것 은 하위 구성 요소 뿐 이 고 바깥쪽 의 부모 구성 요 소 는 변 하지 않 습 니 다.
다음은 내 가 완전한 예 를 내 놓 아 보 겠 다.
App.vue
<template>
<div id="app">
<header>
<router-link to="/">/</router-link>
<router-link to="/hello">/hello</router-link>
<router-link to="/cc">/cc</router-link>
</header>
<router-view style="border: 1px solid red"></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Foo.vue
<template>
<div>
<h1>3434234343</h1>
</div>
</template>
<script>
export default {
name: 'Foo',
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Foo2.vue
<template>
<div>
<h1>this is Foo2</h1>
</div>
</template>
<script>
export default {
name: 'Foo2',
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Foo3.vue
<template>
<div>
<h1>this is foo3</h1>
</div>
</template>
<script>
export default {
name: 'Foo3',
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" rel="external nofollow" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" rel="external nofollow" target="_blank">Forum</a></li>
<li><a href="https://gitter.im/vuejs/vue" rel="external nofollow" target="_blank">Gitter Chat</a></li>
<li><a href="https://twitter.com/vuejs" rel="external nofollow" target="_blank">Twitter</a></li>
<br>
<li><a href="http://vuejs-templates.github.io/webpack/" rel="external nofollow" target="_blank">Docs for This Template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" rel="external nofollow" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" rel="external nofollow" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" rel="external nofollow" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" rel="external nofollow" target="_blank">awesome-vue</a></li>
</ul>
<div>
<router-link to="/hello/foo">/hello/foo</router-link>
<router-link to="/hello/foo2">/hello/foo2</router-link>
<router-link to="/hello/foo3">/hello/foo3</router-link>
</div>
<router-view style="border: solid 1px blue"></router-view>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
경로:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Foo from '@/components/Foo'
import Foo2 from '@/components/Foo2'
import Foo3 from '@/components/Foo3'
Vue.use(Router)
export default new Router({
routes: [
{path: '/', redirect: '/hello'},
{
path: '/hello',
component: Hello,
children: [
{path: '/hello/foo', component: Foo},
{path: '/hello/foo2', component: Foo2},
{path: '/hello/foo3', component: Foo3}
]
},
{
path: '/cc',
name: 'Foo',
component: Foo
}
]
})
주의해 야 할 것 은 App.vue 와 Hello.vue 를 자세히 보 는 것 입 니 다.모두나 는 페이지 를 캡 처 했다.
이 화면 은 맨 위 에 있 는/또는/hello 또는/cc 를 클릭 할 때 빨간색 경로 의 내용 이 변 합 니 다./hello/foo/hello/foo 2/hello/foo 3 를 누 르 면 아래 파란색 경로 의 내용 이 변 합 니 다.
이렇게 하면 우리 가 평소에 사용 하 는 것 과 매우 비슷 하 다.가장 바깥쪽 은 변화 가 있 거나 부분 적 으로 변화 가 있 지만 전체적인 변 화 를 원 하지 않 는 다.
이 동시에 이렇게 하면 모듈 화 에 부합 되 고 각 모듈 은 각각 다른 모듈 에 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.