美文网首页
路由懒加载

路由懒加载

作者: Abby_qi | 来源:发表于2018-05-15 20:12 被阅读0次

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

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

export default {
    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嵌入到对应的图标位置,格式:
<svg class="icon" aria-hidden="true">
<use :xlink:href="svg的id名`"></use>
</svg>

相关文章

网友评论

      本文标题:路由懒加载

      本文链接:https://www.haomeiwen.com/subject/fviydftx.html