SPA的理解

Vue-router是vue的一个插件库，专门实现SPA，那什么是SPA应用呢

就是Web应用(single page web application ,SPA),整个应用只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
而且需要通过ajax请获取

路由的理解

什么是路由

一个路由就是一组映射关系(key-value)，key为路径，value可能是function或componen

路由的分类

后端路由：value是function，用于处理客户端提交的请求，工作过程中：服务器接受到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应式数据

前端路由：value是component，用于展示页面内容，工作过程中当浏览器的路径发生改变的时候，对应的组件就会显示

基本路由

安装vue-router，命令npm i vue-router
应用插件Vue.use(VueRouter)
编写router配置项

import Vue from 'vue'  
import VueRouter from 'vue-router'//引入VueRouter
import Login from '@/views/Login' //路由组件
import Layout from '@/views/Layout' //路由组件
Vue.use(VueRouter)

//创建router实例对象，去管理一组一组的路由
const routes = [
  {
    path: '/',
    redirect: '/layout' // 这里默认打开首页(layout页下的home)
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/layout',
    component: Layout,
    redirect: '/layout/home', // 默认显示二级页面为home首页

]

const router = new VueRouter({
  routes
})

//暴露router
export default router

实现切换 <router-link></router-link>浏览器会被替换为a标签active-class可以配置高亮样式 <router-link active-class="active"></router-link>

5.指定展示位置： <router-view></router-view>

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

多级路由

1.配置路由规则，使用children配置项

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login'
import Layout from '@/views/Layout'
import Home from '@/views/Home'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login' // 这里默认打开首页(layout页下的home)
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/layout',
    component: Layout,
    redirect: '/layout/home', // 默认显示二级页面为home首页
    children: [ //通过childer配置子路由
      {
        path: 'home', //此处一定不要带斜杠
        component: Home
      }
]

const router = new VueRouter({
  routes
})

export default router

跳转（要写完整路径）

<router-link to="Layout/home"></router-link>

Vue Router 路由

SPA的理解

路由的理解

基本路由

多级路由