用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。
安装
可以通过cdn或者直接下载的方式,当然,我个人比较喜欢用过模块化npm安装,如果是在一个模块化的打包系统中,必须显式地通过 Vue.use() 来安装 :
import Vue from 'vue'
import Router from 'vue-router'
import Teacher from '@/BTeacher'
Vue.use(Router);
首先引入vue以及router,(@指的是vue-cli里的src路径)然后引入一个组件,接着去配置Router
export default new Router({
routes: [
{
path: '/name', //这里指明跳转路径,通常写import name form "...的name
name: 'main',
component: Teacher
}]
)}
new Router({ })
创建一个Router对象,path
代表的是路径,name
里是一个唯一的制定标识符
component
放的是组件,
接着就能够调用这个路由了,通过 this.$router.push({path: '路径' +?id})
,路径后面可以添加一个id 来指定不同的跳转,这里
path
后的路径名既是网址后跟的路由名称。