## 路由

1. vue-router

- vue2.0 => 3
- vue3.0 => 4
- 安装：npm install vue-router@3 --save
- vuex: npm install vuex --save

2. router.js

- 引入页面路径
- 将路径挂载到路由上

```
  {
      path:"/路径",
      component: 引入页面路径的名称
  }
```

3. App.vue

```
    跳转标签：
    router-link
    属性：
        to:跳转路径地址
        active-class="active" 添加选中样式
    占位标签：
    router-view
```

4. 多级路由

- router.js

  1. 引入路径
  2. 在 children 属性中添加路由
  3. path 路径不要加：/

- router-link
  - to 的路径完整的路径

5. 路由的重定向

```
  {
    path:'/',
    redirect: '/list'
  }
```

6. 路由命名

- router.js

* name:"xxx"

```
     <router-link active-class="active" :to="{name:'xxx'}"></router-link>
```

7. query 传参

```
     <router-link active-class="active" :to="{
        path:'/list',
        query:{
          names: '小郑',
          age: 30
        }
      }" >去列表</router-link>
```
```
    <router-link active-class="active" :to="`/list?names=小郑&age=30`" >去列表</router-link>
  
```
接收query传参
    * this.$route.query

8. params传参
```
    动态绑定时 路由是name名称 不能是path
      <router-link active-class="active" :to="{
        name:'detail',
        params: {
          name1:'Lucy',
          age1: 10
        }
      }">去详情</router-link>
```
```
    router.js页面
     {
        路由中动态绑定参数名
        path:'/detail/:name1/:age1',
        name:"detail",
        component: Detail
     }
     页面
        to属性中直接传参
      <router-link active-class="active" to="/detail/小A/10" >去详情</router-link>
```
接收params参数
    * this.$route.params