vue-router 进阶

vue-router 进阶 【 分类 -》 列表 -》 详情 】

动态路由 & 路由传参 & 路由接参

• 动态路由：

  • url中路由是改变的，但是改变路由公用一个组件
  • 举例：
    • localhost:3000/detail/001?a=1&b=2
    • localhost:3000/detail/002?a=2&b=3
    • detail

• vue cli3 配置反向代理 20分钟

  • 在根目录下面新建一个 vue.config.js

  // vue.config.js中可以默认直接使用  http-proxy-middleware
  module.exports = {
    devServer: {
      proxy: {
        '/douban': { // /douban 是一个标记
          target: 'http://api.douban.com', // 目标源
          changeOrigin: true, // 修改源
          pathRewrite: {
            '^/douban': '' 
          }
        },
        '/siku': {
          target: 'https://android.secoo.com',
          changeOrigin: true,
          pathRewrite: {
            '^/siku': ''
          }
        }
      }
    }
  }

• 路由的传参 10分钟

  <router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}"></router-link>

• 路由的接参

  • 我们发现凡是使用了路由的组件，我们统称为： 路由组件
  • 路由组件身上会自动添加一个 $route的数据

    id: this.$route.params.id
    query: this.$route.query.xxx
  

• 编程式导航

  • push
    • this.$router.push('/home')
    • this.$router.push({name,params,query})
    • push可以将我们的操作存放到浏览器的历史记录
  • replace
    • this.$router.replace(’/home’)
    • this.$router.replace({name,params,query})
    • replace没有将我们的操作存放到浏览器的历史记录， 效果为返回了二级
  • push/replace的参数就是to属性的参数

解决; vue为了能够监听路由的变化情况，给了一个解决方法： 这个就是导航守卫

路由进阶部分 – 导航守卫（ 路由守卫 路由钩子 ）

1. 作用：
   • 守卫路由
     • 进
       • 举例： 携带数据进
     • 出
       • 举例： 事情完成才能出
2. 导航守卫一共有三种形式 【 项目三选一 】
   • A: 全局导航守卫
     1. 全局前置守卫 router.beforeEach(fn)
        1. fn中有三个参数
           1. to
           2. from
           3. next
              1. true/false/’/login’/{ name: ‘login’}/ vm => {}
        2. 使用场景： 当我们本地存储/cookie中有token，那我们就自动跳转 /mine
     2. 全局的解析守卫
        1. 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
        2. 必须保证整个项目的守卫和异步路由组件解析完成
     3. 全局的后置守卫
        • 可以做一些用户友好提示