## 已民政的項目為例進行說明  1. 所有頁面都在view下面，我們規定view下的一級目錄是項目的初始目錄，如民政相關的所有頁面都寫在了xian-page里面 2. 在xian-page里面建立文件夾，每個文件夾相當于一個頁面。 3. 在文件夾里面建立index.vue頁面，頁面內容如下： ` ~~~ <style lang='less'> </style> <template> <div> <height-camera :isOpen="face_shows2" @ret-fun="retFun"></height-camera> <span>{{sum}}</span> </div> </template> <script> import { mailList } from '@/api/eventlist' import HeightCamera from '_c/height-camera' export default { components: { // 頁面用到的組件 HeightCamera }, data () { // 頁面的變量定義 return { face_shows2: true } }, computed: { // 計算屬性 sum () { return 100 } }, methods: { // 頁面里面用到的所有函數 fun1 () {}, fun2 () {} }, mounted () { // 初始化的js代碼 mailList().then(ret => {}) // 調用接口 } } </script> ~~~ 4.在路由js里面配置對應的路由（/src/router/routers.js）  path-----路由的一個路徑（url訪問的時候會用到這個）【一般我們會以"/"開頭，認為是跟路徑】 name----# 命名路由,相當于給這個路徑定義一個別名 meta---# 路由元信息 相當于給這個路由定義一些我們需要的數據 component--- 將組件 (components) 映射到路由 ### 舉例說明渲染 ~~~ <div id="app"> <router-view></router-view> </div> ~~~ ~~~ const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) ~~~ 這里的`<router-view>`是最頂層的出口，渲染最高級路由匹配到的組件。同樣地，一個被渲染組件同樣可以包含自己的嵌套`<router-view>`。例如，在`User`組件的模板添加一個`<router-view>`： ~~~ const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` } ~~~ 要在嵌套的出口中渲染組件，需要在`VueRouter`的參數中使用`children`配置： ~~~ const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 當 /user/:id/profile 匹配成功， // UserProfile 會被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 當 /user/:id/posts 匹配成功 // UserPosts 會被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] } ] }) ~~~ **要注意，以`/`開頭的嵌套路徑會被當作根路徑。 這讓你充分的使用嵌套組件而無須設置嵌套的路徑。** `