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>,实现导航。
现在访问页面,发现已经多出了导航。