一、概述
npm start:启动项目
npm run dev:启动项目
路由器管理路由;
什么是路由?
路由是一种映射关系,一个key对应一个value,key是path,对于后台路由,
value是处理请求的回调函数,对于前台路由value是组件。
说明:
1) 官方提供的用来实现 SPA(单个页面) 的 vue 插件
2) github: https://github.com/vuejs/vue-router
3) 中文文档: http://router.vuejs.org/zh-cn/
4) 下载: npm install vue-router --save
相关API说明:
1) VueRouter(): 用于创建路由器的构建函数
//创建实例(创建一个路由器出来) new VueRouter({ // 多个配置项(配置对象) }) 2) 路由配置 routes: [ { // 一般路由 path: '/about', component: About }, { // 自动跳转路由 path: '/', redirect: '/about' } ] 3) 注册路由器(以上步骤是在路由器里面配置了路由,路由还没有配置) import router from './router' new Vue({ router // 配置路由器 }) 4) 使用路由组件标签 1. <router-link>: 用来生成路由链接 <router-link to="/xxx">Go to XXX</router-link> 2. <router-view>: 用来显示当前路由组件界面 <router-view></router-view>
二、使用
先下载vue-router包: