Vue筆記3 vue cli單頁面應用與路由設定

2021-08-08 05:13:03 字數 1276 閱讀 4471

1.準備，安裝webpack和vue-cli，根據官網教程構建專案。搭建好的專案如下：

2.配置路由

1). 在components中建立page.vue，在router中的index.js中配置路由。

import vue from


'vue'


//1.匯入路由元件vue-router


import router from


'vue-router'


import hello from


'@/components/hello'


import page from


'@/components/page'


//2.呼叫vue-router


vue.use(router)


//3.建立vue-router例項


const router=new router(,


,]});


export default route;
2). 在入口檔案中配置路由，這裡的入口檔案是main.js

import vue from


'vue'


//匯入路由


import router from


'./router/index.js'


new vue()
3).使用 router-link設定鏈結，使用router-view展示資訊

src="./assets/logo.png">


to="/page">去pagerouter-link>


p>


router-view>


div>


template>3.動態路由 


使用：開頭設定動態路徑


new
router(

]})router-link寫法如下

="}"


>姓名


>
渲染出/user/123，使用$route.params.id獲取id

4.巢狀路由

/user/username

new


router(]}


]})

vue 單頁面過載（重新整理）

首先先說一下標題，此處的重新 重新整理 並不是瀏覽器reload，只是當前頁面元件重新create。如下 router.js const router newrouter 需要在views redirectpage資料夾下新建index.vue，內容如下 export default this ro...

vue單頁面父子傳遞

觸發的自定義事件要放到註冊的元件上 1通過點選 div id div v text money click reduce div child m money zdyclick add child div template id tempchild div click changern div tem...

vue cli3 建立多頁面應用

改變後的目錄結構 修改main.js的檔案引用位址 import vue from vue import router from router import store from store vue.config.productiontip false new vue mobile 當使用只有入口的...