Vue(五)——vue-router(动态路由)_显示商品详情页

动态路由

有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url

/item/1
/item/2
/item/3
...

我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理

...
{
  path: '/item/:id',
  name: 'item',
  component: Item
}
...

动态路由就是通过url路径部分带数据发送请求，vue会监听到数据的变化，数据变化时就会去找匹配的组件，然后进行解析。

 其中 :itemId 表示匹配的 url 中动态部分内容，如上面的 1,2,3 等，同时该值将被赋值给路由的变量 itemId

url可以使用拼接方式，也可以使用动态路由绑定

// home.vue

一、路由对象

vue-router 会在组件中添加（注入）两个属性

• $router

• $route

1.1 $router对象

该对象其实就是 new VueRouter(...) 返回的路由对象，通过该对象我们可以访问全局路由信息，调用路由下的方法，比如：go、back、push 等

// 使用watch监听组件变化,注意watch是对象
  watch: {
    sort() {

      // 监听到sort发生变化后重新发起请求（但是这样不会在url上带上sort=desc不利于分享状态）
      // await this.getItems();

      // 然后通过编程式导航进行跳转(可以拼接字符串，也可以对象形式传参)
      // this.$router.push('/?sort=' + this.sort);

      this.$router.push({
        // 此处name对应路由中Home组件的路由name
        name: "home",
        // 此处为地址栏上地址加上queryString
        query: {
          sort: this.sort
        }
      });

    }

1.2 $route对象

通过该对象可以访问与当前路由匹配的信息

1.2.1 $route.params

获取动态路由有关的信息

如，从主页跳转到商品详情页后，通过路由地址中的商品id获取商品详情并展示。

//item.vue