Vue后台技术点

    1. this.$route 和 this.$router的区别
        在一个vue组件中，都可以访问到这两个对象，它俩的区别 
        this.$route是路由记录对象，只读，存储了与路由相关的信息

        this.$router是路由对象，用来进行路由跳转

    2. 声明式导航和编程式导航
        声明式导航： 通过<router-link>的to属性来声明要跳转的路由
        编程式导航： 通过this.$router的相应方法来实现跳转

    3. 一级导航和页面中二级导航高亮样式的处理
            
            ** 路由配置不能错
            const routes = [
                {  
                    path: "/" , 
                    redirect: '/index'
                },
                { 
                    path: "/index" , 
                    component: index,
                    redirect: '/index/recommend'
                    children: [
                        {
                            path: 'recommend',
                            component: recommend
                        }
                    ]
                },
            ]

            ** 首页的to属性一定要写"/index",而不能用"/"
            <router-link to="/index">首页</router-link>

            ** 在全局或者相应的组件中加入样式
            .router-link-active {
                激活样式
            }

    4. 在vue.config.js中添加路径别名(特别注意： 改动vue.config.js之后一定要重启服务 )

        const path = require('path')

        // 工具函数，添加绝对路径
        // dir: "./src/components"   ---- "E:/share/myapp/src/components"

        function resolve(dir) {
            return path.join(__dirname, dir)
        }
        module.exports = {
            //设置路径别名
            chainWebpack(config) {
                config.resolve.alias
                    //用com这个别名代表./src/components的完整路径
                    .set('com', resolve('./src/components'))
            }
        }


    5. 在脚手架环境中搭建后台接口，模拟数据

        (1) 在根目录新建api文件夹，放入所需的json文件

        (2)在vue.config.js引入json数据

        const miData = require("./api/miCategory.json")
        
        
        (3) 在vue.config.js的module.exports中添加选项devServer

            module.exports = {
                devServer: {
                    port: 3001,
                    before(app) {
                            //   nodejs的后端路由,也就是自定义数据接口
                            app.get("/getMiData", (req, res) => {
                                //beauty
                                res.json(miData)
                            })

                        }
                }
            }