vue-router

1. 路由是vue的一个插件库，专门用来实现SPA应用(single page web application)，SPA的理解：单页应用，点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据需要通过Ajax请求获取

2. 路由route：一个路由就是一组映射关系key-value，key为路径，value可能是component或function，多个路由需要经过路由器router的管理

3. 路由分类 前端路由理解: value是component，用于展示页面内容。工作过程:当浏览器的路径改变时，对应的组件就会显示。 后端路由理解: value是function,用于处理客户端提交的请求。工作过程:服务器接收到一个请求时，根据请求路径找到匹配的函数来理请求返回响应数据。``

4. 基本使用

• 安装vue-router,命令是nmp i vue-router 应用插件Vue.use(VueRouter)

• 编写router配置项:

//引入VueRouter
import VueRouter from "vue-router"
//引入Luyou组件
import About from "../components/About"
import Home from"../components/Home"
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
  routes:[
  {path:"/about",
  component:About},
  {path:"/home",
  component:Home}]
})
//暴露router
export default router

• 实现切换(active-class可配置高亮样式) <router-link active-class="active"to="/about">About</router-link>
• 指定展示位置 <router-view></router-view>

几个注意点

• 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
• 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
• 每个组件都有自己的$route属性，里面存储着自己的路由信息
• 整个应用只有一个router，可以通过组件的$router属性获取到

1. 多级路由

• 配置路由规则，使用children配置项

export default new VueRouter({
  routes:[
   {path:"/about",
   component:About},
   {path:"/home",
   component:Home,
     children:[
     {path:"new",
     component:New}
     {path:"message",
     component:Message}]
  }]
})

跳转要写完整路径<router-link active-class="active"to="/about/new">About