[vue]模擬移動端三級路由
阿新 • • 發佈：2018-11-18
頁面 分享圖片 utf-8 out div app 內容 alt modules
頁面邏輯
實現代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模擬移動端三級路由</title> </head> <body> <div id="app"> </div> <template id="app01"> <div> <h1>app01</h1> <router-link to="/home">home</router-link> <router-link to="/about">about</router-link> <router-view></router-view> </div> </template> <template id="home"> <div> <h2>home</h2> <router-link to="/home/wenxue">文學</router-link> <router-link to="/home/lishi">歷史</router-link> <router-view></router-view> </div> </template> <template id="about"> <div>about</div> </template> <template id="wenxue"> <div>wenxue</div> </template> <template id="lishi"> <div>lishi</div> </template> <script src="node_modules/vue/dist/vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <script> let app01 = { name: "app01", template: '#app01' }; let home = { name: "home", template: '#home' }; let about = { name: "about", template: '#about' }; let wenxue = { name: "wenxue", template: '#wenxue' }; let lishi = { name: "lishi", template: '#lishi' }; let routes = [ {path: '/home', component: home}, {path: '/home/wenxue', component: wenxue}, {path: '/home/lishi', component: lishi}, {path: '/about', component: about}, ]; let router = new VueRouter({ routes }); let vm = new Vue({ el: '#app', render: c => c(app01), router }) </script> </body> </html>
問題: 為什麽點了文學後, home裏只有文學組件的內容了?
[vue]模擬移動端三級路由