路由懶加載

路由懶加載:const 組件名=() => import('組件路徑');
路由傳參:

注意:,當使用路由參數(shù)時,例如從 /find/hello導航到 /find/word,原來的組件實例會被復用。因為兩個路由都渲染同個組件,不會觸發(fā)生命周期鉤子,需要通過watch來監(jiān)聽路由參數(shù)的變化
例如“

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

組件中的slot,通過slot可以讓組件復用性更強

編程式導航:即動態(tài)創(chuàng)建的路由

添加路由: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
      },

// 帶查詢參數(shù),變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }}) 

vue代理:
一、跨域產(chǎn)生的原因:因為ajax有一個同源策略,但咱們調(diào)用的接口來自于第三方網(wǎng)站,那這里必須跨域

二、什么情況下會產(chǎn)生跨域:

協(xié)議名://二級域名.一級域名.類型:端口號/目錄1/文件名?參數(shù)1=值&參數(shù)2=值2&參數(shù)3=值3

1.協(xié)議不同
2.端口不同
3.主域不同
4.主域相同,子域不同
5.域名和ip

三、跨域解決方案

jsonp:前端+后端
CORS:服務(wù)端 http://www.ruanyifeng.com/blog/2016/04/cors.html
代理(服務(wù)端代理,客戶端代理)
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代理實現(xiàn):

打開vue腳手架->config->index.js,找到 dev: {

proxyTable: {
   '/v2':{
    target: 'https://api.douban.com',  //要代理的接口
    changeOrigin: true,  //實現(xiàn)跨域
    pathRewrite: {
      '^/v2': '/v2'
    }
   }

},

svg: svg矢量圖,放大不失真,可以通過css,js操縱
應(yīng)用領(lǐng)域:動畫,icon等

svg使用:

第一步:http://www.iconfont.cn/ 官網(wǎng),搜索需要的icon并添加到購物車
第二步:找開購物車,點擊“下載代碼”并解壓,找到demo_symbol.html文件
第三步:打開demo_symbol.html文件,找開chrome開發(fā)者工具 ->elements
第四步:找到并右擊svg標簽->eidt as html,全選并復制
第五步:找開vue腳本架中的index.html,并將剛才復制的svg代碼粘貼進云
第六步:將svg嵌入到對應(yīng)的圖標位置,格式:
<svg class="icon" aria-hidden="true">
<use :xlink:href="svg的id名`"></use>
</svg>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 《深入理解Java虛擬機:JVM高級特性與最佳實踐(第二版》讀書筆記與常見相關(guān)面試題總結(jié) 1 概述 執(zhí)行引擎是ja...
    玲小喵閱讀 144評論 0 0
  • 根據(jù)名字搜索 https://angular.io/tutorial/toh-pt6#search-by-name...
    哪種生活可以永遠很輕松閱讀 321評論 0 1
  • 1.mac 安裝redis【mac】 (1)下載安裝包,解壓,make,test, install(2)重開一個終...
    呵呵那個呵呵閱讀 245評論 1 0
  • 一) vue通過實例化語法new Vue({el:'',data:"{},methods:{方法名:functio...
    小豬夫人hj閱讀 287評論 2 0
  • 響應(yīng)式布局的理解 響應(yīng)式開發(fā)目的是一套代碼可以在多種終端運行,適應(yīng)不同屏幕的大小,其原理是運用媒體查詢,在不同屏幕...
    懶貓_6500閱讀 857評論 0 0

友情鏈接更多精彩內(nèi)容