二級菜單導航是一種很普遍的功能，一般網頁都會有這個功能。如果是平常的做法就是改變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前端組件學習教程》，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
