vue-router를 사용하여 보조 메뉴 콘텐츠 변환 실현

보조 메뉴 탐색은 매우 일반적인 기능이며 대부분의 웹 페이지에 이 기능이 있습니다. 일반적인 방법이라면 URL을 변경하고 해당 페이지로 이동하는 것입니다. 또 다른 방법은 프레임을 만드는 것입니다.
vue를 사용하는 경우 vue-router를 사용하여 975b587bf85a482ea10b0a28848e78a4에서 구성 요소를 변경하면 페이지를 새로 고치지 않고도 해당 "페이지"로 이동할 수 있습니다. 실제로 URL 주소는 여전히 변경되었지만 페이지의 다른 곳에서는 콘텐츠가 새로 고쳐지지 않았고 단지 975b587bf85a482ea10b0a28848e78a4의 구성 요소가 변경되었습니다.

html

Vue.js를 사용할 때 이미 구성 요소를 애플리케이션에 결합했습니다. vue-router를 추가하려면 구성 요소와 경로 매핑만 구성하면 됩니다. 그런 다음 vue-router가 렌더링하는 위치를 알려줍니다.

<div id="app">
 <div class="leftBox">
 <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <ul>
 <li><router-link to="/" actived>首页</router-link></li>
 <li><router-link to="/article">文章</router-link></li>
 <li><router-link to="/picture">图片</router-link></li>
 <li><router-link to="/music">音乐</router-link></li>
 </ul>
 </div>
 <div class="rightBox">
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
 </div>
</div>

js

경로를 정의하세요. 각 경로는 구성 요소를 매핑해야 합니다. 여기서 "구성요소"는 구성요소 등이 될 수 있습니다. 루트 인스턴스를 생성하고 탑재합니다. 전체 애플리케이션이 라우팅 기능을 갖도록 라우터 구성 매개변수를 통해 경로를 삽입하는 것을 잊지 마세요

var Home = {template: &#39;<div>home</div>&#39;}
 
var router = new VueRouter({
 routes: [
 {path: &#39;/&#39;, component: Home},
 {path: &#39;/picture&#39;, component: Picture},
 {path: &#39;/music&#39;, component: Music},
 {path: &#39;/article&#39;, component: Artlist},
 {path: &#39;/article/:id&#39;, component: Article}
 ]
})
new Vue({
 el: "#app",
 router: router
})

기사 섹션으로 전환할 때 다른 기사 목록을 만들고 기사 제목을 클릭하여 기사 내용을 입력했습니다. .

여기서 데이터를 하드코딩했는데 실제로는 ajax를 통해서 데이터 할당을 받을 수 있습니다.

로딩을 시뮬레이션했는데... 데이터 기반 사고를 바탕으로 v-if="loading"을 사용하여 이러한 로딩이 발생하는지 확인했습니다.

애니메이션 전환에 대해 다른 키를 지정해야 한다는 점을 기억하세요. 그렇지 않으면 아무런 효과가 없습니다.

경로를 생성하고 변경할 때 데이터를 가져오기 위한 메서드에 URL 매개변수를 전달해야 합니다. 여기서 '$route'를 생성하고 감시해야 합니다.

$route를 통해 URL 매개변수를 가져옵니다. .params 또는 $route.query 등 자세한 내용은 튜토리얼을 참고하세요

이전 레벨로 돌아가려면 router.go(-1)를 사용하세요. 이는 뒤로 버튼을 누르는 것과 같습니다

var Article = {
 template: &#39;<div class="post">\
 <div class="loading" v-if="loading">loading.....</div>\
 <transition name="slide">\
 <div v-if="post" class="content" :key="post.id">\
 <button @click="back">返回</button>\
 <p>{{post.title}}</p>\
 <P>{{post.body}}</P>\
 </div>\
 </transition>\
 </div>&#39;,
 data: function() {
 return {
 loading: false,
 error: null,
 post: null
 }
 },
 created:function() {
 this.fetchData();
 },
 watch: {
 &#39;$route&#39;: &#39;fetchData&#39;
 },
 methods: {
 fetchData:function () {
 this.error = this.post = null;
 this.loading = true;
 getPost(this.$route.params.id,(err,post) => {
 this.loading = false;
 if(err) {
 this.error = err.toString();
 }else {
 this.post = post
 }
 })
 },
 back: function() {
 router.go(-1);
 }
 }
}