Vue学习笔记进阶篇之vue-router安装及使用方法

介绍

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

本文是基于上一篇文章（）vue-cli脚手架工具的。

安装

在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里，然后使用以下命令进行安装:

--save参数的作用是在我们的包配置文件package.json文件中添加对应的配置。安装成功后， 可以查看package.json文件，你会发现多了"vue-router": "^2.7.0"的配置。如下：

使用

通过以上步骤，我们已经安装好了vue-router，但是在vue-cli中我们如何使用呢？ 首先，我们需要在main.js文件中导入并注册vue-router:

然后便是实例化：

path: 是路由的路径。

component: 是该路由需要渲染的组件。

上面代码中的DemoHome,DemoAbout,DemoContact都是单文件组件，所以我们同样需要创建上面三个组件，并导入到当前文件。这三个组件我们只是作为示例来使用，所以比较简单，代码分别如下:

DemoHome.vue:

this is home

DemoAbout.vue:

this is about

DemoContact.vue:

this is contact

创建好以上组件后，再使用ES6语法导入到main.js:

最后在Vue实例中加入路由属性就可以了

',components: { App } })

完整的main.js应该是这样：

Vue.use(VueRouter)

Vue.config.productionTip = false

const router = new VueRouter({
mode: 'history',component:DemoContact}
]
})
/ eslint-disable no-new /
new Vue({
el: '#app',components: { App }
})

在这里我们为了学习，所以我们简单的做个布局。接下来，我会再创建两个组件，一个叫DemoHeader,一个叫DemoFooter。DemoHeader里面我放一个logo的图片，和导航，而这个导航的路由也将会使用我们前面定义的路由；DemoFooter就比较简单了，放一些footer信息。

下面我们看下这两个组件的代码：

DemoHeader.vue: