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执行以及路由的重定向问题，再次感谢大家的支持！