声明式导航和编程式导航的优缺点？ 

声明式导航就是通过的形式去实现路由的跳转，router-link 的本质是 a 标签，缺点是自由度不高，比如无法实现一个等待一秒进行页面跳转的功能，编程式导航通过拿到路由的 api 进行操作，更符合编码的形式。

声明式导航中query和params对比？

query 传参中使用字符串和对象传递参数的两种写法：

<!-- 跳转路由，使用query传参，to使用字符串的方式 -->
<span v-for="item in carList" :key="item.id">
  <router-link :to="`/V-vue/v-route/car?id=${item.id}&title=${item.title}`">
    {{ item.title }}
  </router-link>
</span>

<!-- 跳转路由，使用query传参，to使用对象的方式 -->
<span v-for="item in carList" :key="item.id">
  <router-link
    :to="{
      path: '/V-vue/v-route/car',
      query: {
        id: item.id,
        title: item.title,
      },
    }"
  >
    {{ item.title }}
  </router-link>
</span>

<!-- 展示路由跳转后的组件 -->
<div class="view-router">
  <keep-alive>
    <router-view />
  </keep-alive>
</div>

接收参数：

<!-- 通过query接收的参数 -->
 <div>ID:{{ $route.query.id }}</div>
 <div>TITLE:{{ $route.query.title }}</div>

params 传参中使用字符串和对象传递参数的两种写法：

<!-- 跳转路由，使用params传参，使用对象的方式 -->
    <span v-for="item in carList" :key="item.id">
        <router-link
          :to="{
            name: 'car',  //必须通过name的形式
            params: {
              id: item.id,
              title: item.title
            }
          }"
        >
          {{ item.title }}
        </router-link>
      </span>
      
<!-- 跳转路由，使用params传参，使用字符串方式 -->
      <span v-for="item in carList" :key="item.id">
        <router-link :to="`/V-vue/v-route/car/${item.id}/${item.title}`">
          {{ item.title }}
        </router-link>
      </span>

<!-- 展示路由跳转后的组件 -->
    <div class="view-router">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>

接收参数：

     <!-- 通过prams接收的参数 -->
      <div>ID:{{ $route.params.id }}</div>
      <div>TITLE:{{ $route.params.title }}</div>

注意事项：路由携带 params 参数的时候,若使用 to 的对象写法,则不能使用 path 配置项,必须使用 name 配置；同时需要在路由的配置文件中找到对应的 path 添加需要传递的参数。

    children: [
        {
          path: 'car/:id/:title', // params传参需要在path中使用占位符
          name: 'car',
          title: '小汽车',
          key: 'car',
          component: () => import('@/views/V-vue/v-route/car')
        }
      ]

编程式导航中query和params对比？

query 传参中使用 $router.push 的两种写法

<!-- 跳转路由，使用query传参 -->
<span v-for="item in carList" :key="item.id" class="pointer">
   <span @click="() => queryJump(item)">{{ item.title + "——" }}</span>
</span>

<!-- 展示路由跳转后的组件 -->
<div class="view-router">
  <keep-alive>
    <router-view />
  </keep-alive>
</div>

// 跳转方法
methods: {
    queryJump(item) {
      // 第一种写法：
      this.$router.push({
        path: "/V-vue/v-route/car",
        query: { title: item.title },
      });

      // 第二种写法：
      this.$router.push({
        name: "v-garage",
        query: { title: item.title },
      });
    },
  },

params 传参中使用 $router.push 的写法

<!-- 跳转路由，使用param传参 -->
    <span v-for="item in carList" :key="item.id + 10" class="pointer">
      <span @click="() => paramsJump(item)">{{ item.title + "——" }}</span>
    </span>

    <!-- 展示路由跳转后的组件 -->
    <div class="view-router">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
   
// 跳转方法 
  methods: {
    paramsJump(item) {
      this.$router.push({
        name: "v-toycar",
        params: { title: item.title, id: item.id },
      });
    },
  },

vue中$route和$router的区别？

$router 是 VueRouter 的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，$route 是一个跳转的路由对象（路由信息对象），每一个路由都会有一个 $route 对象，是一个局部的对象。区别是一个是全局的对象，一个是局部的对象， $router 是用来操作路由的，$route 是用来获取路由信息的。