- Vue 前言
- Vue API
- Vue 安装
- Vue Vue实例
- Vue 模板语法
- Vue 计算属性
- Vue Class与Style绑定
- Vue 条件渲染
- Vue 列表渲染
- Vue 事件处理器
- Vue 表单控件绑定
- Vue 组件
- Vue 深入响应式原理
- Vue 过渡效果
- Vue 过渡状态
- Vue Render 函数
- Vue 自定义指令
- Vue 混合
- Vue 插件
- Vue 单文件组件
- Vue 生产环境部署
- Vue 路由
- Vue 状态管理
- Vue 单元测试
- Vue 服务端渲染
- Vue 从 Vue 1.x 迁移
- Vue 从 Vue Router 0.7.x 迁移
- Vue 从 Vuex 0.6.x 迁移到 1.0
- Vue 对比其他框架
- Vue HackerNews 克隆
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
Vue 路由
官方路由
对于大多数单页面应用,都推荐使用官方支持的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的复杂示例 。
原文: http://vuejs.org/guide/routing.html
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论