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

时间 2021-02-16

标签 vue web 编程 app ide this spa code component 栏目系统网络繁體版

原文原文链接

1.编程式的导航

1.1 两个属性

1.2 使用场景

不少web应用都会在header区域的左边放置一个LOGO，一般状况点击这个LOGO就会使页面跳转到首页。接下来实现它：vue

<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>

来看效果：

那么编程式怎么作呢，先来看看$router是个什么：web

<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>

点击事件触发后，看看输出：

能够看到，$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里便可。app

1.3 $route

$route其实包含的是当前路由下的所有信息，输出一下看看：

看看query：

ide

动态路由匹配

看文字老是有点懵，举个例子：

能够看到相似这种结构相同的组件的渲染，一般使用的是一个组件，只是其中的内容不一样。这种场景下咱们使用动态路径参数来实现。ui

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

首先咱们能够使用这种方式来实现，但观察路由配置，若是一个课程配一个路由，那么代码会很是的冗余，若是今天有十种课程，明天有一百种课程，还须要咱们不停的去配置。。。想一想就很麻烦，因此这种方式并不可取。this

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

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

上面代码中的/new/:id就是一个模式，意思是相似/new/123，/new/234这样的路径都将使用new.vue这个组件去渲染。看看效果：

能够看到/new/123和/new/234都可以渲染出来，而/new却不行，由于/new并不符合上述的模式，即/new/:idcode

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

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

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

看看结果：

若是改变模式：

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

看看结果：

这就是所谓的动态路由。

使用动态路由作个小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>

看看效果：

再来丰富一下：
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>

看看效果：

总结

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

Keep foolish, keep hungry.