VueRouter——编程式导航-动态路由匹配（三）

头像
野望
    阅读 9 分钟

    1.编程式的导航

    image.png

    1.1 两个属性

    image.png

    1.2 使用场景

    很多web应用都会在header区域的左边放置一个LOGO，通常情况点击这个LOGO就会使页面跳转到首页。接下来实现它：

    <template>
  <div id="app">
    <div class="header">
      <div class="nav">
        <!-- <div class="left-title">个人博客</div> -->
        <router-link to="/" tag="div">个人博客</router-link>
        <div class="right-nav">
          <router-link to="/">首页</router-link>
          <router-link to="/article">文章</router-link>
          <router-link to="/hot">近期热门</router-link>
          <router-link to="/hy">行业相关</router-link>
          <router-link :to="{ name: 'new' }">最新发布</router-link>
          <router-link to="/about">关于</router-link>
        </div>
      </div>
    </div>
    <div class="container">
      <router-view />
    </div>
  </div>
</template>

    来看效果：
    image
    那么编程式怎么做呢，先来看看$router是个什么：

    <template>
  <div id="app">
    <div class="header">
      <div class="nav">
        <div class="left-title" @click="handleClick">个人博客</div>
        <div class="right-nav">
          <router-link to="/">首页</router-link>
          <router-link to="/article">文章</router-link>
          <router-link to="/hot">近期热门</router-link>
          <router-link to="/hy">行业相关</router-link>
          <router-link :to="{ name: 'new' }">最新发布</router-link>
          <router-link to="/about">关于</router-link>
        </div>
      </div>
    </div>
    <div class="container">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$router)
    }
  }
}
</script>

    点击事件触发后，看看输出：
    image.png
    可以看到，$router是一个路由实例对象。并且它身上有很多方法如push,replace,go，本章只讲push方法：

    <template>
  <div id="app">
    <div class="header">
      <div class="nav">
        <div class="left-title" @click="handleClick">个人博客</div>
        <div class="right-nav">
          <router-link to="/">首页</router-link>
          <router-link to="/article">文章</router-link>
          <router-link to="/hot">近期热门</router-link>
          <router-link to="/hy">行业相关</router-link>
          <router-link :to="{ name: 'new' }">最新发布</router-link>
          <router-link to="/about">关于</router-link>
        </div>
      </div>
    </div>
    <div class="container">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$router.push('/')
    }
  }
}
</script>

    很简单，只需要将路径写在push里即可。

    1.3 $route

    image.png
    $route其实包含的是当前路由下的全部信息，输出一下看看：
    image.png
    看看query：
    image.png
    image.png

    动态路由匹配

    image.png
    看文字总是有点懵，举个例子：
    image
    可以看到类似这种结构相同的组件的渲染，通常使用的是一个组件，只是其中的内容不同。这种场景下我们使用动态路径参数来实现。

    {
  path: '/new',
  name: 'new',
  children: [
    {
      path: '231578',
      component: () => import("../components/news/news.vue"),
    },
    {
      path: '331578',
      component: () => import("../components/news/news.vue"),
    }
  ],
},

    首先我们可以使用这种方式来实现，但观察路由配置，如果一个课程配一个路由，那么代码会非常的冗余，如果今天有十种课程，明天有一百种课程，还需要我们不停的去配置。。。想想就很麻烦，所以这种方式并不可取。

    那么有没有什么更好的方式呢，首先需要确定一个模式：

    {
  path: '/new/:id',
  component: () => import("../components/new.vue"),
},

    上面代码中的/new/:id就是一个模式，意思是类似/new/123，/new/234这样的路径都将使用new.vue这个组件去渲染。看看效果：
    image
    可以看到/new/123和/new/234都能够渲染出来，而/new却不行，因为/new并不符合上述的模式，即/new/:id

    下面重要的环节开始了，先来看看$route.params：
    image.png

    <template>
  <div class="new">
    最新发布
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this.$route.params)
  }
}
</script>

    看看结果：
    image.png
    如果改变模式：

    {
  path: '/new/:userId',
  component: () => import("../components/new.vue"),
},

    看看结果：
    image.png
    这就是所谓的动态路由。

    使用动态路由做个小demo

    router.js：

    {
  path: '/new',
  component: () => import("../components/new.vue"),
},
{
  path: '/news/:id',
  component: () => import("../components/news/news.vue"),
},

    new.vue：

    <template>
  <div class="new">
    <ul>
      <li 
        @click="handleClick" 
        v-for="item in list" 
        :key="item.index"
      >
        {{ `${item.index + 1}. ${item.content}` }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {index: 0, content: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, quos."},
        {index: 1, content: "Lorem ipsum dolor sit, amet consectetur adipisicing."},
        {index: 2, content: "Lorem ipsum dolor sit amet."},
        {index: 3, content: "Lorem ipsum dolor sit amet consectetur, adipisicing elit."},
        {index: 4, content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem."},
      ]
    }
  },
  methods: {
    handleClick (e) {
      let id = e.target.innerHTML.split(".")[0].trim()
      this.$router.push(`/news/${id}`)
    },
  },
}
</script>

    news.vue：

    <template>
  <div class="news">
    {{ index }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      index: undefined,
    }
  },
  mounted () {
    this.index = this.$route.params.id
  },
}
</script>

    看看效果：
    image
    再来丰富一下：
    news.vue：

    <template>
  <div class="news">
    <div class="wrapper clearfix">
      <div class="article">
        <div class="title">{{ currentArt.title }}</div>
        <div class="content">{{ currentArt.content }}</div>
      </div>
      <div class="bottom-left" @click="handlePrev">{{ currentArt.prev }}</div>
      <div class="bottom-right" @click="handleNext">{{ currentArt.next }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      index: undefined,
      articles: [
        {index: 1, title: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, quos.", content: "文章1", prev: "", prevId: "", next: "Lorem ipsum dolor sit, amet consectetur adipisicing.", nextId: "2"},
        {index: 2, title: "Lorem ipsum dolor sit, amet consectetur adipisicing.", content: "文章2", prev: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, quos.", prevId: "1", next: "Lorem ipsum dolor sit amet.", nextId: "3"},
        {index: 3, title: "Lorem ipsum dolor sit amet.", content: "文章3", prev: "Lorem ipsum dolor sit, amet consectetur adipisicing.", prevId: "2", next: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.", nextId: "4"},
        {index: 4, title: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.", content: "文章4", prev: "Lorem ipsum dolor sit amet.", prevId: "3", next: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem.", nextId: "5"},
        {index: 5, title: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem.", content: "文章5", prev: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.", prevId: "4", next: "", nextId: ""},
      ],
      currentArt: {},
    }
  },
  methods: {
    getCurrentArt () {
      this.articles.forEach(ele => {
        if (ele.index == this.index) {
          this.currentArt = ele
        }
      })
    },
    handlePrev(e) {
      this.articles.forEach(ele => {
        if (ele.prev == e.target.innerHTML) {
          this.$router.push(`/news/${parseInt(ele.prevId)}`)
        }
      })
    },
    handleNext(e) {
      this.articles.forEach(ele => {
        if (ele.next == e.target.innerHTML) {
          this.$router.push(`/news/${parseInt(ele.nextId)}`)
        }
      })
    },
  },
  mounted () {
    this.index = this.$route.params.id
    this.getCurrentArt()
  },
  watch: {
    '$route' () {
      this.index = this.$route.params.id
      this.getCurrentArt()
    }
  }
}
</script>

    看看效果：
    image

    总结

    动态路由相对来说是一个很简单的知识点，但在实际开发中又经常会用到。像一些场景，结构一样，只需要改变数据，这个时候就可以使用动态路由，在结构上我们只需要编写出一个骨架，而在切换时去请求对应的数据进来就可以。这样就可以避免重复的开发相同的结构，并且内容是会增加或减少的。比如上面举出的课程的例子，我们不可能为每一个课程都编写一个结构，所以动态路由很好的解决类诸如此类的问题。

    Keep foolish, keep hungry.

    前端vue.js
    野望
    18 声望4 粉丝

    一个为了写出漂亮代码而努力的前端人

    « 上一篇
    VueRouter——命名路由-嵌套路由-重定向（二）
    下一篇 »
    VueRouter——命名视图（四）

    引用和评论

    推荐阅读
    头像
    【JavaScript】对象类型数组 for ... of 去重

    野望阅读 980

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 6.8k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 6阅读 4.3k

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 5阅读 990

    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.3k

    头像
    Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

    alwaysVe赞 4阅读 11.5k

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 2阅读 3.1k评论 1

    0 条评论
    得票最新