Vue-router
简介： 由于Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作vue-router。
路由就是SPA（单页应用）的路径管理器。
因为我们用Vue写的都是单页应用，就相当于只有一个主的index.html页面，所以<a></a>标签是不起作用的，必须使用vue-router来进行管理。
安装 Vue-router
vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入命令。
npm install vue-router --save-dev
如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。
解读router/index.js文件
src/router/index.js文件，这个文件就是路由的核心文件
这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码。
增加一个 Hi 的路由和页面
1、在src/components目录下，新建 Hi.vue 文件。
2、编写文件内容要包括三个部分<template><script>和<style>。文件很简单，只是打印一句话。
3、引入 Hi组件：我们在router/index.js文件的上边引入Hi组件
4、增加路由配置：在 router/index.js 文件的routes[] 数组中，新增加一个对象
通过上面的配置已经可以增加一个新的页面了
现在的路由配置文件:
router-link制作导航
<router-link> 链接标签
<router-link to="/">[显示字段]</router-link>
解析：
to：是我们的导航路径，要填写的是在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” ，
[显示字段] ：就是要显示给用户的导航名称，比如首页 新闻页。
在 src/App.vue文件中的template里加入<router-link>，实现导航。
现在访问页面，发现已经多出了导航。
网友评论