Vue 路由的使用 ( 动态传参动态路由路游接参导航守卫)

最新推荐文章于 2024-08-12 16:30:34 发布

lllllllwj

最新推荐文章于 2024-08-12 16:30:34 发布

阅读量727

点赞数

本文链接：https://blog.csdn.net/lllllllwj/article/details/89646848

版权

路由的使用

命名路由

给路由起个名字，这样可以方便我们在使用路由的时候，简写路径

命名视图

给出了一级视图以外的其他视图起名字，这样可以区分不同级别的路由使用不同级别的视图

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

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
```
编程式导航 5分钟
- 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
  - back
  - go

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

作用： — 类似【保安】
- 守卫路由
  - 进
    - 举例：携带数据进
  - 出
    - 举例：事情完成才能出
导航守卫一共有三种形式
- A: 全局导航守卫
  1. 全局前置守卫 router.beforeEach(fn)
    1. fn中有三个参数
  2. 全局的解析守卫
    1. 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
    2. 必须保证整个项目的守卫和异步路由组件解析完成
  3. 全局的后置守卫
    - 可以做一些用户友好提示
- B: 路由独享守卫
  - 写在路由表中的守卫钩子
  - 针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的
- C: 组件内守卫
  - 组件内的前置守卫 beforeRouteEnter((to,from,next)=>{})
    - 导航进入组件时，调用
    - this是访问不到的，如果非要访问this ,必须通过 next(vm=>{})访问
    - 因为组件此时没有创建，所以没有this
    - 案例：数据预载（进入组件前就获得数据）
```
    next(vm => { //vm指的就是组件
       const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
       vm.$set(vm.category,'categorys',result)
     })
```
  - 组件内的后置守卫
    - 导航离开组件时，调用
    - this是可以访问到
  - 组件内的更新守卫（路由传参和路由的接参）
    - 在当前路由改变，但是该组件被复用时调用
    - 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    - 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    - 可以访问组件实例 this
功能：导航守卫可以监听路由变化情况
名词
- 前置：要进入当前路由
- 后置：要离开当前路由
关于next的使用
- next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由
- next( false ) 表示不通过，表示从当前路由跳转不到目标路由
- next(’/login’) 等价于 next({path:’/login’}) 跳转指定的路由
- next(’/login’) 等价于 next({path:’/login’,params,query})
- next( fn ) 数据预载
业务：当我们进入到一个项目的首页时，但是当我们没有注册账号时，它主动跳转到了注册/登录页

  router.beforeEach((to,from,next)=>{
      const name = localStorage.getItem('name')
      if( name || to.path === '/login' ){
        //如果有   /  -->  /home
        next()
      }else{
        next('/login')
      }
  })