vue-router を使用してセカンダリ メニュー コンテンツの変換を実現する

セカンダリ メニュー ナビゲーションは非常に一般的な機能であり、ほとんどの Web ページにこの機能があります。一般的なアプローチであれば、URL を変更して対応するページにジャンプすることです。もう 1 つの方法はフレームを使用することです。
vue を使用している場合は、vue-router を使用して のコンポーネントを変更できるため、ページを更新せずに対応する「ページ」にジャンプできます。実際、URL アドレスは依然として変更されていますが、ページ上の他の場所のコンテンツは更新されず、単に 内のコンポーネントが変更され、新しいコンポーネントが表示されました。

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」を作成して監視する必要があります。

URL パラメーターは、$route.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);
 }
 }
}