路由懶加載

路由懶加載: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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容