vue续集2

1.前端路由

1.1为什么做单页面应用

（1）传统的开发方式 url改变后，立马发送请求，响应整个页面，有可能资源过多，传统开发会让前端的页面出现 "白屏" 用户体验不好（2）SPA 单页面应用 ： 锚点值的改变后，不会立刻发送请求，而是在某个合适的时机，发送ajax请求，局部改变页面中的数据,页面不立刻跳转用户体验好

1.2前端路由的原理

                 登录页面     注册页面     
     
     

1.3vue-router的基本使用

npm init --yesnpm install vue-router --save

1.4vue-router集成

它是vue中核心插件1. 下载vue-router      npm init --yes   npm install vue-router --save   - 引入vue-router的模块  默认会抛出一个VueRouter对象 另外还有两个全局的组件router-link 和router-view2. Vue.use(VueRouter)3. 创建路由对象

1.5命名路由

给当前的配置路由信息对象设置name:'login'属性:to = "{name:'login'}"

1.6路由范式----路由参数之params,query

 (1)xxxx.html#/user/1        配置路由对象中               {                path:'/user/:id',                component:User             }                (2)xxxx.html#/user?userId = 1    {        path:'/user'    }         在组件内部通过this.$route 获取路由信息对象

1.7编程式导航

1.8嵌套路由

一个router-view 嵌套另外一个router-view

1.9动态路由匹配

 // 共同的子组件    var ComDesc = {        data() {            return {                msg: ''            }        },        template: `            
                    我是{{msg}}            
        `,        created() {            // alert(1);            this.msg = 'andorid';        },        watch: {// 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。//因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。            '$route' (to, from) {                // 对路由变化作出响应...                console.log("to------------------", to);                console.log("from------------------", from);                this.msg = to.params.id;            }        }    }

1.10keep-alive

1.11路由meta实现权限控制