单页应用如何得到多页应用的体验，VUE给我们提供了vue-router,此文不谈论如何安装如何使用，只记录下一些在实际运用中的知识点，所以如果您看到了此文在这之前你需要对vue-router有一定的了解，可能您还需要使用才会继续深入！点击这里去查看vue-router
router-view的使用时机
router-view是我们router进入后需要渲染的内容呈现的空间
我们来理解一下这个空间：
page.jpg
在上图中基本覆盖了我们在渲染组件时需要的三个场景
page1 打开一个新页面
page2 上面导航下面内容
page3 左边导航右边内容
上面的情况可能在一个项目中全部出现也可能出现一种或者2种
如何来设计：
1.router-view独立于一个.vue 用来实现page1情况
2.router-view 位于 nav, sidebar 同一级用来实现page2 page3
上面都是单独出现的情况
如果是同时出现是如何渲染的了，在最开始时项目中出现2个router-view时，感觉很困惑VUE是如何去使用router-view的。
项目结构如下
v.jpg
p1.jpg
p2.jpg
p3.jpg
主要代码
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import H from '../home/h.vue'
import N1 from '../home/n1.vue'
import N2 from '../home/n2.vue'
import N3 from '../home/n3.vue'
import P from '../page/p.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'h',
component: H,
children:[
{
path:'/n1',
component: N1
},
{
path:'/n2',
component: N2
},
{
path:'/n3',
component: N3
}
]
},
{
path:'/p',
component: P
}
]
})
home/h.vue
<template>
<div>
<p>我是测试上面</p>
<ul>
<router-link to="/n1">
<li>nav1</li>
</router-link>
<router-link to="/n2">
<li>nav2</li>
</router-link>
<router-link to="/n3">
<li>nav3</li>
</router-link>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
home/n1.vue
<template>
<div>
<p>test1</p>
<router-link to="/p">
<p>去page</p>
</router-link>
</div>
</template>
从上面的代码中我们可以分析出，如何使用router-view的，主要我们来看看router/index.js
router中"/"，我们访问的根路径，根路径渲染的是H组件，H组件有三个nav导航，分别对应的是n1,n2,n3路由，这里n1,n2,n3是H的子路由，当我们点击相应的路由时在H下方进行了渲染-这里我们用到的就是H路由中的router-view,我们试着删掉H中的router-view，删除后点击n1,n2,n3我们得到的是界面上无任何效果。
p4.jpg
当我们点击n1中的p路由时，我们渲染了一个全屏的page页面出来，然后并没有使用H中的router-view而是使用了App.vue中的router-view。
所以得出结论： router-view的使用是当前路由页面其父路由（上一级）页面定义的router-view.
所以以后我们在使用vue-router时，设计路由的路径时需要更严谨的考虑。
tag的使用
有些时候我们在使用路由的时候直接使用
<router-link to="/p"></router-link>
他会渲染成a标签，可能会出现样式等情况的改变，这个是其一最主要的是在我们布局的时候无辜的多出了一个标签。
比如
<ul>
<router-link to="/n1">
<li>nav1</li>
</router-link>
<router-link to="/n2">
<li>nav2</li>
</router-link>
<router-link to="/n3">
<li>nav3</li>
</router-link>
</ul>
渲染后
<ul>
<a href="#/n1" class="router-link-exact-active router-link-active">
<li>nav1</li>
</a>
<a href="#/n2" class="">
<li>nav2</li>
</a>
<a href="#/n3" class="">
<li>nav3</li>
</a>
</ul>
其一、我们看出完全打乱了我们的页面结构，对seo的优化很不利，降低了代码的语义化。
其二、我们在安全性上通常会对a标签进行适当的拦截，如果渲染成a标签可能就导致相应的功能不能正常的处理。
我们router-link加上tag就可以改变其自生使用的a标签
<router-link to="/p" tag="li"></router-link>
在我们工作中强烈建议合理使用tag来使用router-link功能
replace 的使用
我们先来看看vue-router 中replace定义了什么样的功能:
它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
使用场景：tab组件，有这么一个故事小明大看了一个网站，上面有三个tab A,B,C,看完后小明点击了返回按钮退出了网页正常情况下是这么进行交互的。但是在vue-router中不使用replace的话会出现这样的问题，当小明切换了几十次A,B,C的时候，小明点击返回会一直的后退直到找到最开始的根路由位置
解决方案就是在路由中加入 replace
<router-link :to="..." replace>
OR
router.replace(...)
这样我们就实现了传统tab nav的功能，其实router我们可以看成传统非spa的一个页面，只是我们是在同一个页面中进行渲染的，这就是其不同的情况。
keep-alive
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
Props：
include - 字符串或正则表达式。只有匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
在我们页面中有大量请求的时候我们可能在切换路由的时候去缓存数据，以达到降低性能的功能，但是有些时候我们需要动态的更新部分数据，这个时候我们可以在keep-alive上添加exclude来进行处理
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
关于更多VUE-ROUTER的内容可以去点击这里去查看vue-router
如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues
网友评论