Vue-router 入门

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>，实现导航。

现在访问页面，发现已经多出了导航。