Vue路由 —— vue-router

         在上一篇内容讲到关于单页面组件的内容，同时也附上补充讲了关于单页面（SPA）和多页面（MPA）之间的优缺点，在本篇目当中就要来讲这个路由（vue-router），通过路由来实现页面的局部切换或者更改：附上vue-router文档 —— 官方文档 | Vue Router

一级路由配置

        可以在 main.js 中引入路由模块，这些其实在创建项目的时候就已经帮我们处理好了的；

         在 /router/index.js 中来处理一下，来通过简单的一部分对这个路由文件进行了解：

         然后将项目运行起来时，会发现在浏览器请求url ：http://localhost:8080/ 的时候会发现请求的url会时变成 http://localhost:8080/#/

        现在来将原先 /views/HomeView.vue 文件进行一个简化；

<!-- /views/HomeView.vue -->
<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"></div>
</template>

        通过路由信息的配置，将HomeView.vue组件引入，当path为Home时，即请求为http://localhost:8080/#/home 的时候就会对应的切换到HomeView.vue 组件，那么下面来进行一下尝试：

        在 /router/index.js 中配置：

        这样一来通过请求 http://localhost:8080/#/home 能否切换到HomeView组件呢？

        很显然是失败了，没有将HomeView组件中的内容显示出来，这是为什么呢？

        还记得在前面讲过这个项目的入口文件 main.js ，再拿出来看一看：

       即使在路由配置当中通过path: ' /home '，是可以匹配到HomeView组件，但关键是这个HomeView组件应该如何去显示，显示在哪里呢？

        如果要去显示就得到App.vue中去显示，App.vue同时要预留一个位置给HomeView组件来进行显示内容；通过 <router-view></router-view> 来进行预留位置；

<!-- App.vue -->
<template><div id="app"><sHello></sHello><button>按钮</button><router-view></router-view></div>
</template><script>
import hello from './components/SayHello.vue'
import Vue from 'vue'Vue.component('sHello', hello)export default {}
</script>
<style>button {background: yellow;}
</style>

        现在来再次测试运行来看一下HomeView组件是否成功了 —— 成功将HomeView组件显示出来了！

---

        下面就来用前面所讲到的内容来完成一个声明式导航！

声明式导航

        讲到声明式导航大家已经了解和清除了，那么不再赘述，先来看一下简单的效果：

        当路由进行变化时，对应的页面也将随即切换，当请求的url地址为 localhost:8080/#/home 时页面会切换到首页页面（HomeView），服务（ServerView）和关于(AboutView) 这个两个同理，那么下面先来编写这几个页面：

1）在 /views/ 目录下编写如下几个页面文件：

<!-- HomeView.vue -->
<template><div class="home">这是首页页面</div>
</template>

<!--ServerView.vue-->
<template><div class="server">这是服务页面</div>
</template>

<!--AboutView.vue-->
<template><div class="about">这是关于页面</div>
</template>

2）在 /router/index.js 文件中配置路由信息：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import Home from '../views/HomeView.vue'
import Server from '../views/ServerView.vue'
import About from '../views/AboutView.vue'Vue.use(VueRouter)const routes = [{path: '/'},{path: '/home',component: Home},{path: '/server',component: Server},{path: '/about',component: About}
]const router = new VueRouter({routes
})export default router

3）编写声明式导航组件

        创建 /components/TabBar.vue 文件作为导航组件文件，在 a标签 中通过 #/path路径 就可以进行跳转的切换，这里的预编译器选择是 "scss" ；

<template><nav><ul><li><a href="#/home">首页</a></li><li><a href="#/server">服务</a></li><li><a href="#/about">关于</a></li></ul></nav>
</template><script>
export default {}
</script><style lang="scss">nav{margin: 0 auto;padding: 0;border-bottom: 1px solid black;}ul{display: flex;li{flex:1;text-align: center;list-style: none;a{text-decoration: none;}}}
</style>

4）将声明式导航组件引入App.vue中，最后不要忘记在 App.vue 中预留一个显示的容器 <router-view></router-view> 来让其有显示的位置，否则不报错，也不会显示出来；

<!--App.vue-->
<template><div id="app"><tabBar></tabBar><router-view></router-view></div>
</template><script>
import tabbar from './components/TabBar'
import Vue from 'vue'Vue.component('tabBar', tabbar)export default {}
</script>
<style>button {background: yellow;}
</style>

5）项目测试运行：

•  点击【首页】： 切换路由时对应的页面也会随即切换到这个首页页面；

• 点击【服务】，点击【关于】：测试OK！

---

location.hash

        通过导航点击可以进行一个切换，对应的路经发生变化，window.onhashchange方法能够监听到锚点的改变该函数就会触发回调，在回调中获取到location.hash的值，这样一来就可以对导航文字进行效果处理，如高亮显示；——  [ #是锚点，#/路径 是hash(哈希) ]

        知道了这样一个原理后，我们不会这么来操作，因为Vue已经提供好了，通过 <router-link> 标签，下面来调整 TabBar.vue 中的代码段：

<!-- App.vue -->
<template><nav><ul><router-link to="/home" tag="li">首页</router-link><router-link to="/server" tag="li">服务</router-link><router-link to="/about" tag="li">关于</router-link></ul></nav>
</template>

        进行测试运行查看一下：

        观察可以看到原先并没有设置它的类选择器进行样式显示，这样一来可以进行高亮效果的显示，只需要进行样式的添加即可：

<style lang="scss">.router-link-active{color:skyblue;font-weight: bold;}...
</style>

        可以看到选择的这个导航已经有了高亮的文字显示了，那么如果需要避免冲突，可以自行的来设置这个类选择器的样式，给 <router-link> 标签中添加active-class属性；如下： 

<template><nav><ul><router-link to="/home" tag="li" active-class="active-chosen">首页</router-link><router-link to="/server" tag="li" active-class="active-chosen">服务</router-link><router-link to="/about" tag="li" active-class="active-chosen">关于</router-link></ul></nav>
</template>
<script>export default {}
</script>
<style lang="scss">.active-chosen{color: skyblue;font-weight: bold;}
</style>

---

        也许读者已经发现了一个问题，当进入页面的时候不应该就是【首页】内容了吗？怎么还需要再点击一次首页才能看到【首页】呢？这就是下面要来讲到的 "重定向" ！

重定向

        当进入页面的时候地址是 ： http://localhost:8080/#/ ，那么现如今我们的首页地址则是 http://localhost:8080/#/home，则当进入页面时就定制重定向到首页的地址即可：

        在 /router/index.js 中添加路由配置信息：

...
const routes = [{path: '/',redirect: '/home'},
...

        通过 redirect 将路径 " / " 进行重定向到 " /home "，接下来的再运行测试项目的时候进入的页面就是首页了；

        以上就是本篇目的全部内容了，通过vue-router了解到了基础的路由信息、一级路由配置、声明式导航和在声明式导航中了解到了路由切换会触发location.hash执行以及路由的重定向问题，再次感谢大家的支持！