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

前端之家收集整理的这篇文章主要介绍了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:

在上面的代码中,我们看到了一个陌生的标签,这个是什么玩意呢?其实他就是vue-router集成的一个组件,渲染出来的是一个标签。而他的属性to其实就是一个props属性,这里面的意思就是路由的路径,与前面定义的路由path对应。关于router-link的更多介绍可以看官网router-link API文档

DemoFooter.vue:

我们的组件都已经创建好了,接下来的事情就是把他们组合到一起。这个组合,我们就用App.vue来实现吧。

先整理下我们的思路啊:

在我们的页面上,我们需要把DemoHeader,DemoFooter放进去,而我们的DemoHeader里面定义了导航,我们希望把导航出来的组件放到header和footer之间。所以大致应该是这个样组合:

下面看下完整的代码吧:

同样的道理,我们要是想使用一个组件,导入和注册的步骤是少不了的。

导入:

注册

在上面的代码中我们又发现了个陌生标签这个标签同样是vue-router的一个内部组件,实际上它是一个是一个 functional 组件。具体信息可以去官网router-viewAPI文档详细了解。它的作用就是渲染路由导航过来的组件,也就是这个标签内就是我们放置DemoHome,DemoContact的地方。

因为它也是个组件,所以可以配合 使用。如果两个结合一起用,要确保在内层使用 ,添加上述两个标签后的template代码如下:

添加一个简单的淡入淡出的样式:

通过上面的代码,我们发现之前学过的过渡这里都可以使用,可参考

最后我们看下我们做了半天的成果吧:

首页

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/37739.html

猜你在找的Vue相关文章