vue进行路由拼图的使用案例
实现思路,利用路由进行实现多个组件拼图:
Detail.vue
<template> <div> <h1>详细展示</h1> <div>鞍山市所所所所所所所所所所所所所所所所所所所所</div> </div> </template> <script> </script>
Header.vue
<template> <div> <h1>标题栏</h1> <div>欢迎</div> </div> </template> <script> </script> <style scoped> </style>
Sidebar.vue
<template> <div> <h1>边条</h1> </div> </template> <script> </script> <style scoped> </style>
在router\下index.js中引入
import Vue from 'vue' import Router from 'vue-router' import Detail from '../components/Detail' import MyHeader from '../components/Header' import Sidebar from '../components/Sidebar' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', components: { myHeader: MyHeader, mySidebar: Sidebar, myDetail: Detail } } ] })
注意事项:
app.vue
<template> <div id="app"> <table width="100%"> <tr> <td colspan="2" style="background-color:darkgoldenrod"> <router-view name="myHeader"></router-view> </td> </tr> <tr> <td width="20%" style="background-color:thistle"> <router-view name="mySidebar"></router-view> </td> <td width="80%" style="background-color:aquamarine"> <router-view name="myDetail"></router-view> </td> </tr> </table> </div> </template> <script> export default { name: 'App' } </script> <style> </style>
最终运行结果:\
笔记转移,由于在有道云的笔记转移,写的时间可能有点久,如果有错误的地方,请指正