关于前端:VueRouter编程式导航路由动态匹配三

1.编程式的导航

1.1 两个属性

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>

来看成果：

那么编程式怎么做呢，先来看看$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>

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

能够看到，$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

$route其实蕴含的是以后路由下的全副信息，输入一下看看：

看看query：

动静路由匹配

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

能够看到相似这种构造雷同的组件的渲染，通常应用的是一个组件，只是其中的内容不同。这种场景下咱们应用动静门路参数来实现。

{
  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这个组件去渲染。看看成果：

能够看到/new/123和/new/234都可能渲染进去，而/new却不行，因为/new并不合乎上述的模式，即/new/:id

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

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