2018-05-15

路由懒加载：const 组件名=() => import('组件路径');

路由传参：

注意：，当使用路由参数时，例如从 /find/hello导航到 /find/word，原来的组件实例会被复用。因为两个路由都渲染同个组件，不会触发生命周期钩子，需要通过watch来监听路由参数的变化

例如“

exportdefault{name:'find',        .....        watch:{'$route'(to,from) {                console.log(to.params);            }        },

组件中的slot，通过slot可以让组件复用性更强

编程式导航：即动态创建的路由

添加路由：this.$router.push()  ，会向history添加新记录前进和后退：this.$router.go(步骤)替换：this.$router.replace()  ，它不会向history添加新记录编程式导航如何传参：    // 命名的路由          router.push({ name:'user', params: { userId: 123 }})          其中：name为路由表router.js每项路由的名子      例如：        {            name:'login',            path:'/login',            component:login          },        // 带查询参数，变成 /register?plan=private    router.push({ path:'register', query: { plan:'private'}})

vue代理:

一、跨域产生的原因：因为ajax有一个同源策略，但咱们调用的接口来自于第三方网站，那这里必须跨域

二、什么情况下会产生跨域：

协议名://二级域名.一级域名.类型:端口号/目录1/文件名?参数1=值&参数2=值2&参数3=值3

1.协议不同

2.端口不同

3.主域不同

4.主域相同，子域不同

5.域名和ip

三、跨域解决方案

jsonp：前端+后端CORS:服务端http://www.ruanyifeng.com/blog/2016/04/cors.html代理（服务端代理，客户端代理）

ajax跨域错误提示： Failed to load https://api.douban.com/v2/movie/search?q=%E7%BA%A2%E6%B5%B7%E8%A1%8C%E5%8A%A8: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.vue代理实现：  打开vue脚手架->config->index.js，找到  dev: {    proxyTable: {'/v2':{        target:'https://api.douban.com',//要代理的接口changeOrigin:true,//实现跨域pathRewrite: {'^/v2':'/v2'}      }    },

svg: svg矢量图，放大不失真，可以通过css,js操纵

应用领域：动画，icon等

svg使用：第一步：http://www.iconfont.cn/ 官网，搜索需要的icon并添加到购物车第二步：找开购物车，点击“下载代码”并解压，找到demo_symbol.html文件第三步:打开demo_symbol.html文件，找开chrome开发者工具 ->elements第四步：找到并右击svg标签->eidt as html，全选并复制第五步：找开vue脚本架中的index.html，并将刚才复制的svg代码粘贴进云第六步：将svg嵌入到对应的图标位置,格式：

作者：他方l

链接：https://www.jianshu.com/p/97798c7e76ad

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。