浅谈$router、$route的区别&params和query的区别

$router、$route的区别

$router

• $router：其实就是router对象，就是我们在引入vue-router的时候，会创建一个路由对象(router)‘constrouter=newVueRouter();‘通过事件的输入的时，发觉，这个$router就是这个router对象的实例！
• 作用：大体而言，就是使用这个$router对象来实现路由之间的条件
  • 原理：这是借助对象原型身上的方法来实现的__proto__，在$router对象的对象原型之上有着许多方法，比如push,replace,go,back等方法
  • this.$router.push({}) => 实现路由的跳转，带有历史记录
    • 里面有着参数：params(所传递的参数,这是一个对象的形式！) name(跳转到具名的组件) query(传递的参数的方式,这也是一个对象)
  • this.$router.replace({}) => 实现路由的跳转，不带历史记录

$route

• $route：就是你点击的时候，跳转到那个页面，还是处于那个页面，那么所显示的页面，就是活跃的路由，而$route就是指向的是，当前获取路由

一个简单的点击按钮，打印出两者的区别

• 在Home组件之中，点击按钮

  <div class="home">
    home
    <router-link to="/news/20">新闻</router-link>
    <router-link to="/profile/222/菲菲">档案</router-link>

    <button @click="goNews(122)">新闻</button>
    <button @click="goProfile(222,'啦啦')">档案</button>

    <button @click="btnClick">按钮</button>
    <router-view></router-view>
  </div>

  methods: {
    btnClick() {
      console.log("我是$router", this.$router);
      console.log("我是$route", this.$route);
    },
  },

query和params传递参数

• params传递参数：这是以动态路由的方式传递参数，需要在route/index.js文件中，在routes对象下的path需要配置动态路由

{ //这是一个动态路由的方式 传递参数的配置
    path: '/novelDetails/:id',
    name: 'NovelDetails',
    meta: {
      title: "书籍详情"
    },
    component: () => import("../views/category/NovelDetails.vue")
  },

* 然后在使用的时候，需要在params之中传递一个id 
* 注意点：就是在params传递的值，在刷新后，会消失，但是id比较特殊，会保留！

	//跳转到详情页！
   gotoNovelDetails(id) {
      console.log("我是跳转详情页");
      this.$router.push({
        name: "NovelDetails",
        params: {
          id,
        },
      });
    },

• query：这是以参数的形式参数传递参数，在path路径后面拼接?后面就是query对象里面传递的参数，刷新后，url之中还是存在这个参数路径！ 不需要在route/index.js路由下配置 直接配置path路径即可！

    //跳转到目录
    async gotoCatelog() {
      const c_type = "dushi-catalog";
      const { id } = this.$route.params;
      // console.log("跳转目录");
      this.$router.push({
        name: "Catalog",
        query: {
          id,
          c_type,
        },
      });
    },

• 注意点：就是在以query传递参数，那么就是要使用this.$route.query的方式来获取这个传来的参数
• 注意点2：就是在以params传递参数，那么就是要使用this.$route.params的方式来获取这个传来的参数

以下一个简单的案例

	{
    path: '/news',
    name: 'News',
    component: () => import('../views/News.vue')
  }

• query :相对于发送了一次get请求 => 参数以?的方式拼接在url后面

• Home.vue

  <div class="home">
    home
    <button @click="goNews(122)">新闻</button>
    <button @click="goProfile(222,'啦啦')">档案</button>

    <button @click="btnClick">按钮</button>
    <router-view></router-view>
  </div>

  methods: {
    goNews(id) {
      this.$router.push({
        name: "News",
        params: { id },
        query: { index: "01", row: 20 },
      });
    },
    goProfile(id, name) {
      this.$router.push({
        name: "Profile",
        params: { id, name },
      });
    },
    btnClick() {
      console.log("我是$router", this.$router);
      console.log("我是$route", this.$route);
    },
  },

• News.vue

  <div>
    我是news
    {{$route.params.id}}
    {{$route.query.index}}
    {{$route.query.row}}
    <router-view></router-view>
  </div>

结果：