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.