二級菜單導航是一種很普遍的功能,一般網頁都會有這個功能。如果是平常的做法就是改變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 })
切換到了文章部分時,我又弄了個文章列表,點擊文章標題才進入文章內容。
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前端組件學習教程》,歡迎大家學習閱讀。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。