DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 利用vue-router實現二級菜單內容轉換
利用vue-router實現二級菜單內容轉換
編輯:關於JavaScript     

二級菜單導航是一種很普遍的功能,一般網頁都會有這個功能。如果是平常的做法就是改變url,跳到相應的頁面;還有一種就是frame。
如果用vue的話,可以用vue-router改變<router-view>裡面的組件,這樣就能做到不刷新頁面都能跳到相應“頁面”。其實url地址還是變了,但是他沒有刷新頁面其他位置的內容,只是改變了<router-view>裡面的組件,渲染了新的組件。
在線demo:http://runjs.cn/code/9th3cgxo

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

定義路由。每個路由應該映射一個組件。 其中”component” 可以是組件等。 創建和掛載根實例。記得要通過 router 配置參數注入路由,從而讓整個應用都有路由功能

var Home = {template: '<div>home</div>'}

var router = new VueRouter({
 routes: [
 {path: '/', component: Home},
 {path: '/picture', component: Picture},
 {path: '/music', component: Music},
 {path: '/article', component: Artlist},
 {path: '/article/:id', component: Article}
 ]
})
new Vue({
 el: "#app",
 router: router
})

切換到了文章部分時,我又弄了個文章列表,點擊文章標題才進入文章內容。

  • 這裡我寫死了數據,實際可以通過ajax拿到數據賦值。
  • 我模擬了loading…,根據數據驅動的思維,通過v-if="loading"來判斷這個loading是否出現。
  • 動畫切換記得要指定不同的key,不然是沒有效果的。
  • 創建和改變路由的時候,都要通過傳遞url的參數去一個方法拿到數據,這裡就要createdwatch '$route'
  • 拿url參數是通過$route.params或$route.query等,具體看教程
  • 返回上一級是用router.go(-1),相當於按退回按鈕
var Article = {
 template: '<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>',
 data: function() {
 return {
 loading: false,
 error: null,
 post: null
 }
 },
 created:function() {
 this.fetchData();
 },
 watch: {
 '$route': 'fetchData'
 },
 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);
 }
 }
}

本文已被整理到了《Vue.js前端組件學習教程》,歡迎大家學習閱讀。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved