在线文档教程

23. Routing( 路由)

路由

官方路由器

对于大多数单页应用程序,建议使用官方支持的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.jsDirector,集成同样很容易。这是一个使用Page.js完整示例。