前言
vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
首先在html中,引入vue-router.js和vue.js,用router-link触发路由跳转,router-link可以像a标签一样使用和定义样式
router-view区域是路由匹配到的组件渲染的地方
Hello App!
Go to Foo
Go to Bar
然后是js代码
首先定义路由组件,组件可以是简单的组件(template简单定义即可),也可是extend定义的复杂组件
接下来定义路由映射表,就是定义路径和组件之间的映射
然后使用路由映射表创建路由对象
最后使用路由对象创建vue对象,并挂载到指定元素
// 0. 如果使用模块化机制编程,导入 Vue 和 VueRouter,要调用 Vue.use(VueRouter)
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template: '
foo
' }
const Bar = { template: '
bar
' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue