路由懒加载 / 懒加载

路由懒加载:

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' }}) 

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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 路由懒加载:const 组件名=() => import('组件路径'); 路由传参: 注意:,当使用路由参数时,...
    何海洋_847e阅读 884评论 0 0
  • 路由懒加载:const 组件名=() => import('组件路径');路由传参: 注意:,当使用路由参数时,例...
    Yaoxue9阅读 514评论 1 0
  • 路由懒加载:const 组件名=() => import(‘组件路径’);路由传参: 注意:,当使用路由参数时,例...
    CDistance阅读 419评论 1 1
  • 路由懒加载:const 组件名=() => import('组件路径');路由传参: 注意:,当使用路由参数时,例...
    梦的枷锁阅读 448评论 1 0
  • 罗马共和国,在恺撒,屋大维的努力下,罗马由原来的共和逐渐成为一个含括地中海的超级大帝国,而在东方,公元前221年,...
    随时随帝阅读 1,805评论 10 2