介绍
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:
DemoAbout.vue:
DemoContact.vue:
创建好以上组件后,再使用ES6语法导入到main.js:
最后在Vue实例中加入路由属性就可以了
',components: { App } })