Appearance
路由
本节目标:理解“路由”的核心思路,并能把它用于实际开发或面试表达。
==官方路由==
==对于大多数单页面应用,都推荐使用官方支持的== ==vue-router== ==库====。更多细节可以移步== ==vue-router== ==文档====。==
==从零开始简单的路由==
==如果你只需要非常简单的路由而不想引入一个功能完整的路由库,可以像这样动态渲染一个页面级的组件:==
==const== ==NotFound = { template:== =='<p>Page not found</p>'== ==}========const== ==Home = { template:== =='<p>home page</p>'== ==}========const== ==About = { template:== =='<p>about page</p>'== ==}======
==const== ==routes = {====== =='/'====: Home,====== =='/about'====: About========}======
==new== ==Vue({====== ==el:== =='#app'====,====== ==data: {====== ==currentRoute:== ==window====.location.pathname====== ==},====== ==computed: {====== ==ViewComponent () {====== ==return== ==routes[====this====.currentRoute] || NotFound====== ==}====== ==},====== ==render (h) {== ==return== ==h(====this====.ViewComponent) }========})==
==结合== ==HTML5 History API====,你可以建立一个麻雀虽小五脏俱全的客户端路由器。可以直接看====实例应用====。==
==整合第三方路由==
==如果你有更偏爱的第三方路由,如== ==Page.js== ==或者== ==Director====,整合起来也====一样简单====。这里有一个使用了== ==Page.js== ==的====完整示例====。==> 来自
<https://cn.vuejs.org/v2/guide/routing.html>