基于组件的 vue 动态路由 (模仿react-router4)

2018-08-09 admin

<HistoryRouter> <div> <Route path="/contacts"> <Contacts :contacts=“contacts”></Contacts> </Route> <Route path="/contacts/:id"> <Contact></Contact> </Route> </div> </HistoryRouter> </template> <script> import {HistoryRouter, Route, RouterLink} from ‘vue-component-router’;

export default { data () { return { contacts: [‘Contact 1’, ‘Contact 2’] }; }, components: { HistoryRouter, Route, Contacts: { props: [‘contacts’], components: {RouterLink}, template: <ul> <li v-for="contact of contacts"> <RouterLink :to="/contacts/${contact}"></RouterLink> </li> </ul> }, Contact: { props: [‘id’], template: <div>{{id}}</div> } } } </script>


### [](#components)Components

## [](#router)`Router`

Router acts as a provider to the various other components, or any other component which is decorated with `withRouter`, passing down the current location, and history object. It expects a location object, which has an API similar to `window.location` and a history object, with an API similar to `window.history` to be passed in as props.

## [](#historyrouter)`HistoryRouter`

A component which passes the browser's history and location (via the `history` module on npm) to Router. This is what you will want to use (in a browser).

## [](#route)`Route`

Take's two props, `path` and `exact`. Path takes an express style route (which is based on [path-to-regexp](/go/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fpath-to-regexp)), and if the browser's location matches that path, it will show the content. The content can either be a a component, or a scopedSlot. They will be passed the router parameters, the path that matched (useful for nesting routes), and the current url (useful for building nested links), either as props, or as parameters, respectively.

Passing in `exact` as true will make the route match exactly.

<Route path=“something/:id”> <template scope="{id, path, url}"> {{id}} {{path}} {{url}} </template> </Route>


## [](#routerlink)`RouterLink`

Takes three props, `to`, `activeClass` (defaults to 'active') and `tag` (defaults to `a`). This will render a link tag which knows how to update the location, and will set an active class when the route matches the link.

## [](#matchfirst)`MatchFirst`

Expects a list of `Routes` as slots, and will render the first one that matches.

## [](#redirect)`Redirect`

Takes a prop `to`, and will cause the browser to redirect to that url

## [](#withrouter)`withRouter`

A HOC which will inject the wrapped function and inject the `router` object, which contains the `history` and `location` objects

## [](#withhandleclick)`withHandleClick`

A HOC that takes a component or tag, and returns a component that handles clicks similar to `RouterLink`. This enables using other components or tags as router links without `

原文链接:https://github.com/blocka/vue-component-router

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37637.html

文章标题:基于组件的 vue 动态路由 (模仿react-router4)

相关文章
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
回到顶部