vue 路由

什么是路由

自己理解路由

• 简单地说，路由就是根据不同的url地址展示不同的页面和内容
• 说起路由，最先想到的应该就是路由器，那么路由器的工作原理是什么呢？
• 路由器的功能就是一个中转站，就是把网络中的包通过一个一个路由器到达转发的目的

实现原理：

就像一个人如果要去某个地方，一定要在他的脑海里有一张地图，在每个路由器的内部也有一张地图，这张地图就是路由表。

前端路由

• 随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行
• 异步交互体验的更高级版本就是 SPA —— 单页应用
• 单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由

单页面应用 - SPA

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。

• 优点
  • 用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
  • 前后端分离
• 缺点
  • 初次加载时耗时多
  • 导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）或使用hash模式
  • 不利于seo

在vue-cli3中使用vue-router

• 比默认配置多的文件
  • views 存放页面
  • router.js 配置路由对象信息
• routerjs中

export default new Router({
  routes: [
    {
      path: '/',  // 匹配的路由名称
      name: 'home',
      component: Home // 匹配上路由所显示的内容
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

传参

查询字符串

<router-link to="/login?id=1"></router-link>

{
    path: "/login"
}

参数形式

<router-link to="/login/123"></router-link>
{
    path: "/login/:id"
}

路由守卫

• 全局路由守卫
  • 写在main.js
  • router.beforeEach((to, from, next) => {})
  • 触发机制：只要有路由的跳转，都会触发全局路由守卫，所以，当需要被拦截的路由较多时，建议使用全局路由守卫

let arr = ["/home/my", "/home/cart"];// 这个数组存的是需要被拦截的路由
router.beforeEach((to, from, next) => {
  console.log("全局路由守卫被触发")
  let uid = localStorage.getItem("uid");
  if (arr.indexOf(to.path) != -1) {
    console.log("该路由需要被拦截")
    if (uid) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
  // to 是一个对象，是你将要访问的路由的对象信息，我到哪里去
  // from 是一个对象，是你从哪里来
  // next之前就可以做一些验证判断，是否登录
  // 用户想看首页 => /home  
  // 我得先判断你是否已经登录过，如果没有登录，我就让你去登录页，如果已经登录
  // console.log(from)
  // if (to.path == '/home') {
  //   // 从本地存储拿出uid
  //   let uid = localStorage.getItem('uid');
  //   if (uid) {
  //     next()
  //   } else {
  //     next('/login')
  //   }
  // }
  // next app.use((req, res, next) => {next()})
  // 只有调用了next，你想to的那个页面才能被展示
  next()
})

• 路由独享守卫
  • 只要想去该路由的时候，就会触发
  • 该路由守卫只属于某一路由

{
    path: "my/:id",
    component: () => import("@/views/my.vue"),
    beforeEnter: (to, from, next) => {
        console.log(to)
        console.log(from)
        // next之前又可以判断了
        let uid = localStorage.getItem("uid");
        if (uid) {
          next()
        } else {
          next('/login')
        }
        // next()
    }
}

• 组件内的守卫
  • 只要组件被渲染到页面
  • beforeRouteEnter(to, from, next) {this不能访问}
  • beforeRouteUpdate(to, from, next) {当路由改变，但是组件没变}
  • beforeRouteLeave(to,from, next) {当要离开此路由的时候}