2021-03-15

#小米APP的路由结构搭建
##小米app的结构搭建

        1.  安装vue-router.js    npm install vue-router -S  

        2.  在src中创建views文件夹，存放页面级路由组件

            创建所需的页面级路由组件

            Index.vue 
            Category.vue
            Star.vue
            Cart.vue
            My.vue

···

            例如：  <1>在views中创建Index.vue

                    <2>输入"vue",回车，生成基本代码结构 

                    <3> 在template中创建div

                            <template>
                                <div class="index">
                                    首页的内容
                                </div>
                            </template>

···

        3.  在src下创建router文件夹，创建index.js文件,进行路由配置
            
            import Vue from 'vue'
            import VueRouter from 'vue-router'

            Vue.use(VueRouter)
            //引入页面级路由组件

            import Index from '@/views/Index.vue'

···

            //路由配置

            const routes = [
                {
                    path: '/',
                    component: Index
                }
            ]

···

            //创建路由对象
            const router = new VueRouter({
                routes
            }

···

            //导出路由对象
            export default router

···

        4. 在main.js中引入路由并注册                
            import router from './router/index.js'
            ......

            new Vue({
                router: router
            })

···

        5. 在根组件App.vue中使用<router-view>组件和<router-link>组件
        <template>
            <div id="app">
                <router-view></router-view>
                <div class="footer">
                    <router-link to="/">首页</router-link>
                </div>
            </div>
        </template>

···
地址栏路径不同，会根据路由配置，在router-view中显示对应的路由组件