Vue-路由

1.vue-router的理解
vue的一个插件库，专门用来实现SPA(single page web application)应用
2.对SPA应用的理解
a.整个应用只有一个完整的页面
b.点击页面中的导航链接不会刷新页面，只会做页面的局部更新
c.数据需要通过ajax请求获取
3.什么是路由？
路由就是一组映射关系（key-value）
key为路径，value的值可能是function或component
（1）要实现以下最简单的SPA应用效果：

步骤：
1.安装vue-router，命令：npm i vue-router(@3)
备注：2022年2月7日以后，vue-router的默认版本为4，而且vue-router4只能在vue3中使用，vue-router3才能在vue2中使用，可用@3来指定3版本
2.应用路由插件：Vue.use(vueRouter)
3.编写router配置项：

//引入vueRouter
import vueRouter from 'vue-router'

//引入路由组件
import home from '../pages/Home'
import about from '../pages/About'

//创建router实例对象，去管理一组一组的路由规则
export default new vueRouter({
    routes: [{
            path: '/home',
            component: home,
        },
        {
            path: '/about',
            component: about,
        }
    ]
});

4.实现切换(active-class可配置高亮样式)

 <router-link class='list-group-item' active-class="active" to='/home'>Home</router-link> 

5.指定展示位置

<router-view></router-view>

（2）实现多级路由(具有嵌套关系): 其实只要掌握了之前所学到的最基本的路由关系，那么多级路由的实现其实很简单，就是一个套娃的过程。1.先准备好两个组件：News.vue和Message.vue2.在路由配置项中，添加代码：

 routes: [{
            path: '/home',
            component: home,
            children: [{
                    path: 'message',
                    component: message
                },
                {
                    path: 'news',
                    component: news
                }
            ]
        },

要特别注意的是：children配置项中的path属性，不需要再携带"/"，因为vue-router它自动帮我们添加了。
3.在home组件中，添加代码：

  <ul class="nav nav-pills nav-stacked ">
           <router-link class='list-group-item' active-class="active" to='/home/news'>News</router-link>
           <router-link class='list-group-item' active-class="active" to='/home/message'>Message</router-link>
</ul>

要特别注意的是：to的路径要把”/home”携带上，我第一次些的时候只写成"to=‘/news’ ",这样会造成路由器找不到这个路径(因为路由器在匹配的时候先匹配最外面的路由)。
（3）路由传参：
路由传参有两种方式：
a.通过query的方式：直接在url里面加？来携带参数，并且参数之间用&符号隔开
b.通过params的方式：直接在url后面携带’/'来携带参数，但是这种方法需要在路由配置中配置path: ‘details/:id/:name’

为了使得传参的过程更加清楚，我们再加入一层套娃，就是在message组件下又加了一个组件details来存放信息。

但是此时我们不利用给message中的消息001、消息002分别都再次添加路由。而是点击消息001或者消息002时，都把信息展示到同一个detail组件中。只是利用传递参数的方式，让details根据不同的点击而展示不同的内容。
首先先修改router配置项：

routes: [{
            path: '/home',
            component: home,
            children: [{
                    path: 'message',
                    component: message,
                    children: [{
                        path: 'details',
                        component: details,
                    }]
                },
    

从上面的配置可以看到，现实第一层home，然后进入到message，然后又进入到details，总共实现了三层的嵌套关系。

a.query方式实现传参：
a.1：跳转路由并携带query参数，to的字符串写法
Message组件中添加代码：

 <ul>
      <li v-for='m in messageArr' :key="m.id">
          <router-link :to="`/home/message/details?id=${m.id}&name=${m.name}`">  {{m.name}}</router-link></li>
  </ul>

a.2：跳转路由并携带query参数，to的对象写法

<router-link :to="{
              path:'/home/message/details',
              query:{
                 id:m.id,
                 name:m.id,
               }

          }">{{m.name}}
</router-link>

Details组件中接收到参数：

<div>
      <ul>
          <li>消息编号：{{$route.query.id}}</li>
          <li>消息内容：{{$route.query.name}}</li>
      </ul>
  </div>

b.通过params的方式：
b.1跳转路由并携带params参数，to的字符串写法
发送：

  <router-link :to="`/home/message/details/${m.id}/${m.name}`">{{m.name}}</router-link>

b.2跳转路由并携带params参数，to的对象写法

<router-link :to="{
              name:'xijie',
              params:{
                 id:m.id,
                 name:m.id,
               }
          }">{{m.name}}
</router-link>

需要注意的是：如果要使用params方式来携带参数，并且是to的对象写法时，to中的配置项不能使用path，而只能用name
接收：

 <ul>
          <li>消息编号：{{$route.params.id}}</li>
          <li>消息内容：{{$route.params.name}}</li>
</ul>