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

37次阅读

共计 5731 个字符，预计需要花费 15 分钟才能阅读完成。

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.

正文完
前端
发表至： 前端
2020-12-28
 0
关于前端:JavaScript加解密
关于前端:你需要知道的浏览器端存储
关于前端:超简单代码从URL获取查询参数
关于前端:ReactTS-element-implicitly-has-an-any-type-because告警解决