## 已民政的项目为例进行说明  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 } ] } ] }) ~~~ **要注意，以`/`开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。** `