vue-router的定义与使用方法，vue-router传参，路由组件与非路由组件，路由的两种模式--hash/history

vue-router

  1、是什么？

        是vue官方的一个插件  和vuex类似
        专门用来实现一个SPA应用
        基于vue的项目基本都会用到此库
        vuex  vue-router  这两个插件应用比较广泛

 
2、单页Web应用（single page web application，SPA）

        整个应用只有一个完整的页面（这个完整的页面，由多个组件组成）

        点击页面中的链接不会刷新页面, 本身也不会向服务器发普通请求

        当点击路由链接时，路径改变,  最终只会做页面的局部更新（组件切换）

        切换过来之后，数据都需要通过ajax请求获取, 并在前端异步展现

3、路由器和路由

        路由器：管理路由使用的工具，路由器一个项目当中只能有一个
        路由：是一个key:value的映射关系

 前台路由   路径 和 组件
        {

            path:'/home',
            component:Home

        }
        当点击链接的时候，路径会发生变化，但是不会向服务器发普通请求，而是去显示对应的组件        

 后台路由   路径 和 函数

        app.get('/users/info',function(req,res){

        })

        当点击链接（a标签）的时候，路径会发生变化，而且会向服务器发请求，
        然后匹配到后端的一个函数处理这个路由的请求，返回需要的数据

    4、简单理解前台路由：路由可以让我们实现组件的切换和跳转：
            点击链接，改变路径
            匹配路由，
            显示对应的组件

5、路由组件和非路由组件 

        组件： 代码和资源的集合就叫组件   

        非路由组件：  
            不需要路径的改变去切换
            定义：定义组件都是创建一个.vue文件,只是定义的位置不同，它是在components里面
            注册：在哪用在哪引入去注册，或者全局注册
            使用：在哪用在哪写组件标签，本质是内存中多了个组件对象
        
        路由组件：       
            需要路径的改变才能切换
             定义：定义组件都是创建一个.vue文件,只是定义的位置不同，它是在pages（views）里面
             注册：在路由器当中配置路由的时候注册
             使用：在固定的内置组件当中进行切换  

路由组件和非路由组件的最大区别

除了在注册和使用的时候这两种组件有区别，其实他们的生命周期也是有很大区别的

路由组件的生命周期是点击链接的时候，才开始的，路由组件才会创建，mounted才能执行

路由组件在切换的时候，会被销毁，显示的时候重新创建

同一个路由组件传参显示不同数据，mounted回调只会执行一次，因为是同一个组件

6、怎么做    

        1）、拆分页面定义组件
            路由组件和非路由组件            

        2）、路由器注册路由组件（注册组件）：

            路由器的配置
                1、安装路由器   vue2安装的是3版本    
                2、引入并声明使用
                3、向外暴露一个路由器对象
                4、在main.js当中注入路由器对象
                    在每个vue的组件当中都可以通过this.$router拿到路由器对象
                      this.$route拿到当前匹配到的路由对象

              配置完路由器，你就可以配置路由，同时就注册了路由组件了
                                
        3）、使用路由实现组件切换
            router-link    路由链接，就是点哪，可以让你的路径变为你指定的

            router-view    路由组件显示区域，就是组件需要在哪显示

7.Vue-router传参

路由传参

第一步：把参数写在路由链接路径当中,用户点击会修改路径   （字符串和对象）

路由传参的两种参数：params参数  query参数

   我要传递id使用params参数    params参数是属于路径的一部分，配置路由的时候就要占位

   我要传递content使用query参数   query参数是？分割后面的key=value&key=value，但是不属于路径的一分部

path:'msgdetail/:msgId',  //:msgId是给传递的params参数占位，

第二步：点击路由链接的时候，路径会去路由器当中的路由当中匹配，匹配同时会把参数解析添加到路由对象当中

第一种写法：字符串拼接

{{m.content}}

第二种写法：模板字符串

{{m.content}}

第三种写法：对象

                  name:'msgdetail',

          params:{msgId:m.id},

          query:{msgContent:m.content}

        }">{{m.content}}

第三步：匹配成功，显示对应的路由组件同时把当前的路由对象让所有的组件（路由和非路由组件）都可以得到

标签接收时{{$route.params.msgId}}

Props传参

通过props配置简化路由传递参数的操作

1、props:布尔值，只能映射params参数，不用

props:true  //它是把params参数映射为组件内的属性

2、props:对象，专门用来映射一些额外的数据，也很少用

props:{username:'赵丽颖'}

3、props:函数

   props(route){

return {msgId:route.params.msgId,msgContent:route.query.msgContent}

   }

Props布尔值

在路由里写props: true  它是把params参数映射为组件内的属性

组件中 props:['msgId']接收，在标签可直接写 {{msgId}}

Props对象

props: {username: '哈哈'}

组件接收并使用

props: ['msgId','username'],