vue自定义组件多个html标签,Vue自定义组件及Vue Router

简介

组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树

例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。

两种组件的类型

为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。组件的注册类型有:全局注册和局部注册。至此,我们的组件都只是通过 Vue.component 全局注册的:

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。

局部注册

如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的 components 属性实现局部注册, 我就不做详细的介绍了。

Vue Router

vue-router这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?

一、vue-router是什么

路由就是SPA(单页应用)的路径管理器。再通俗的说vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。至于我们为什么不能用a标签,这是因为用Vue做的都是单页应用,就相当于只有一个主的index.html页面,所以你写的标签是不起作用的,你必须使用vue-router来进行管理。

二、vue-router实现原理

SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式;根据mode参数来决定采用哪一种方式

1、Hash模式:vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中也不会不包括#;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据

2、History模式:由于hash模式会在url中自带#,如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。(当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id推荐大家看一下)

3、使用路由模块来实现页面跳转的三种方式

1:直接修改地址栏

2:this.$router.push(‘路由地址’)

3:

三、vue-router核心要点

1.vue-router如何参数传递

①用name传递参数

在路由文件src/router/index.js里配置name属性

模板里(src/App.vue)用$router.name来接收,比如:

{{ $router.name}}

②通过 标签中的to传参

这种传参方法的基本语法:

valueString

比如先在src/App.vue文件中

Hi页面1

然后把src/router/index.js文件里给hi1配置的路由起个name,就叫hi1.

{path:'/hi1',name:'hi1',component:Hi1}

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

{{$route.params.username}}-{{$route.params.id}}

你可能感兴趣的:(vue自定义组件多个html标签,Vue自定义组件及Vue Router)