09-Vue.js路由传参、cli3反向代理、编程式导航、导航守卫、路由懒加载、动态缓存

最新推荐文章于 2024-08-18 23:58:50 发布

Orange_SQ

最新推荐文章于 2024-08-18 23:58:50 发布

阅读量194

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_37970964/article/details/100364669

版权

一、cli3配置反向代理

1、在根目录下新建vue.config.js文件
2、在该js文件中配置

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

3、重启项目

二、路由传参、接参

1、传参

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

2、接参
之前在main.js中写的new Vue({ router }) 使得路由组件上携带了$route数据

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

三、编程式导航

1、push

this.$router.push(’/home’) `
this.$router.push({name,params,query})
push可以将我们的操作存放到浏览器的历史记录

2、replace

this.$router.replace(’/home’)
this.$router.replace({name,params,query})
replace没有将我们的操作存放到浏览器的历史记录，效果为返回二级

注：push/replace的参数就是to属性的参数

四、导航守卫

又称：路由守卫、路由钩子、路由拦截

1、全局导航守卫

 管理或监听整个项目

全局前置守卫

  router.beforeEach(fn(to,from,next){ })

全局解析守卫

  router.beforeResolve(fn(to,from,next){ })

全局后置守卫
做用户友好提示
```
  router.afterEach(fn(to,from){ })
```

2、路由独享守卫

写在路由表中，是路由配置选项之一
无法监听与当前路由无关的路由

beforeEnter: (to, from, next) => { }

3、组件内守卫

组件内前置守卫
因为组件此时没有创建，所以this访问不到，需要通过next(vm=>{ })访问
```
beforeRouteEnter(to,from,next){ }
```
组件内更新守卫
可以访问组件实例this
```
beforeRouteUpdata(to,from,next){ }
```
组件内后置守卫
this可以访问到
```
beforeRouteLeave(to,from,next){}
```

关于next的使用

next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由
next( false ) 表示不通过，表示从当前路由跳转不到目标路由
next(’/login’) 等价于 next({path:’/login’}) 跳转指定的路由
next(’/login’) 等价于 next({path:’/login’,params,query})
next( fn ) 数据预载 next(vm=>{ })

五、动态效果实现

animate.css

六、路由懒加载

1、vue异步组件

/* vue异步组件技术 */
{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'],resolve)
}

2、es提案的import()

// 没有指定webpackChunkName，每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index') */
// 指定了相同的webpackChunkName，把组件按组分块,会合并打包成一个js文件。 
const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')

3、webpack提供的require.ensure()

//按需加载
{
  path: '/home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')，
  name: 'home',
}

七、动态缓存

<router-link to = "" keep-alive></router-link>