mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 23:14:06 +08:00
52 lines
3.7 KiB
HTML
52 lines
3.7 KiB
HTML
<div class="content guide with-sidebar routing-guide">
|
||
<h1>路由</h1>
|
||
<h2 id="官方路由"><a class="headerlink" href="#官方路由" title="官方路由"></a>官方路由</h2><p>对于大多数单页面应用，都推荐使用官方支持的 <a href="https://github.com/vuejs/vue-router" rel="noopener" target="_blank">vue-router 库</a>。更多细节可以移步 <a href="https://router.vuejs.org/" rel="noopener" target="_blank">vue-router 文档</a>。</p>
|
||
<h2 id="从零开始简单的路由"><a class="headerlink" href="#从零开始简单的路由" title="从零开始简单的路由"></a>从零开始简单的路由</h2><p>如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件：</p>
|
||
<pre><code class="hljs js"><span class="hljs-keyword">const</span> NotFound = { <span class="hljs-attr">template</span>: <span class="hljs-string">'<p>Page not found</p>'</span> }
|
||
<span class="hljs-keyword">const</span> Home = { <span class="hljs-attr">template</span>: <span class="hljs-string">'<p>home page</p>'</span> }
|
||
<span class="hljs-keyword">const</span> About = { <span class="hljs-attr">template</span>: <span class="hljs-string">'<p>about page</p>'</span> }
|
||
|
||
<span class="hljs-keyword">const</span> routes = {
|
||
<span class="hljs-string">'/'</span>: Home,
|
||
<span class="hljs-string">'/about'</span>: About
|
||
}
|
||
|
||
<span class="hljs-keyword">new</span> Vue({
|
||
<span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
|
||
<span class="hljs-attr">data</span>: {
|
||
<span class="hljs-attr">currentRoute</span>: <span class="hljs-built_in">window</span>.location.pathname
|
||
},
|
||
<span class="hljs-attr">computed</span>: {
|
||
ViewComponent () {
|
||
<span class="hljs-keyword">return</span> routes[<span class="hljs-keyword">this</span>.currentRoute] || NotFound
|
||
}
|
||
},
|
||
render (h) { <span class="hljs-keyword">return</span> h(<span class="hljs-keyword">this</span>.ViewComponent) }
|
||
})</code></pre>
|
||
<p>结合 HTML5 History API，你可以建立一个麻雀虽小五脏俱全的客户端路由器。可以直接看<a href="https://github.com/chrisvfritz/vue-2.0-simple-routing-example" rel="noopener" target="_blank">实例应用</a>。</p>
|
||
<h2 id="整合第三方路由"><a class="headerlink" href="#整合第三方路由" title="整合第三方路由"></a>整合第三方路由</h2><p>如果你有更偏爱的第三方路由，如 <a href="https://github.com/visionmedia/page.js" rel="noopener" target="_blank">Page.js</a> 或者 <a href="https://github.com/flatiron/director" rel="noopener" target="_blank">Director</a>，整合起来也<a href="https://github.com/chrisvfritz/vue-2.0-simple-routing-example/compare/master...pagejs" rel="noopener" target="_blank">一样简单</a>。这里有一个使用了 Page.js 的<a href="https://github.com/chrisvfritz/vue-2.0-simple-routing-example/tree/pagejs" rel="noopener" target="_blank">完整示例</a>。</p>
|
||
<div class="guide-links">
|
||
<span>← <a href="deployment.html">生产环境部署</a></span>
|
||
<span style="float: right;"><a href="state-management.html">状态管理</a> →</span>
|
||
</div>
|
||
<div class="footer">
|
||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||
<div class="bsa-cpc"></div>
|
||
<script>
|
||
(function(){
|
||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||
_bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
|
||
target: '.bsa-cpc',
|
||
align: 'horizontal',
|
||
disable_css: 'true'
|
||
});
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
发现错误？想参与编辑？
|
||
<a href="https://github.com/vuejs/cn.vuejs.org/blob/master/srcrouting.md" target="_blank">
|
||
在 GitHub 上编辑此页！
|
||
</a>
|
||
</div>
|
||
</div> |