一、路由相關點

1. 路由跳轉傳參以及接參
https://segmentfault.com/a/1190000012393587
方法一：

（1） 參數配置：

{ path : 'xx/:參數變量',component:xx}

(2) 使用

<router-link to='xx/參數'></router-link>

(3) 傳參

<router-link to='xx/參數?a=1&b=2'></router-link>

(4) 獲取參數

this.$route.params this.$route.query

方法二：
（1）參數配置

{ path : 'xx/:參數變量A',component:xx}

(2) 使用及傳參

<router-link to='{name:'xx',params:{參數變量A:值},query:{}}'></router-link>

(3) 獲取參數

this.$route.params this.$route.query

注意：name 中的 ‘xx’ 是 router 配置中的 name 值，params 中的參數變量要與 router 配置中 path 的 參數變量一致，query 是要傳的參數，相當于 a=1&b=2

方法三：
（1） 使用及傳參

this.$router.push({path: '/propertyInfo/mall/mallList',// name: 'mallList',query: {mallCode: 'M000989'}})

（2）獲取參數：

this.$route.query

2. keep-alive
keep-alive 會記錄緩存，若不想被記錄緩存，可以將生命函數鉤子替換為： activated() 鉤子。

例如：直接在 created 中寫 console.log ，它在第一次進入這個頁面時會被打印，后面將不會再打印出來


將 created 替換成 activated 后，每次進入該頁面，該頁面都將清楚緩存（有點類似 F5 刷新）

3. router-view

若果像注釋那樣寫，將會在頁面上渲染出3個相同的組件，調用接口時，將會被多次調用。
解決辦法： 在后面寫一個router-view就好了

<keep-alive><router-view /> </keep-alive>

產生的問題是，渲染出來的DOM結構與 tabs 不是父子關系，而是兄弟關系。

上面的問題可以使用組件解決



注意： 因為是在同一個父組件中，tabs 之間如果要路由跳轉，可以使用命名視圖。
4. 命名視圖
https://router.vuejs.org/zh/guide/essentials/named-views.html
路由官網： https://router.vuejs.org/zh/
（1） 使用方法：可作為頁面的二級頁面-詳情頁

修正一下： 命名視圖并不會替換與它 router-view 同級的所有dom
（3） 路由配置：

二、路由進階 - 路由守衛

vue-Router文檔
導航守衛的三種實現方法：全局守衛、路由獨享的守衛、組件內的守衛
前置守衛： 判斷用戶是否登錄，如登錄就可以進入用戶頁，否則阻止用戶進入用戶頁。登錄之后跳到用戶頁
后置守衛： 在某一個頁面輸入一系列信息之后，用戶失誤點擊了跳轉到另外一個頁面，再跳轉到該頁面，此時用戶之前輸入的信息將會被清空。后置守衛是為了用戶輸入信息后未保存就跳轉頁面時，信息不會被清空

1. 全局前置守衛：beforeEach 、afterEach

//在 main.js中router.beforeEach(to,form,next) =>{//to: 即將要進入的目標 路由//from : 當前導航正要離開的路由//next(): 讓from->to這一過程執行完，如果不寫next()，就相當于執行了next(false)//next(false): 中斷 from-> to 這一過程 }) router.afterEach((to, from) => { // ... })

2. 路由獨享守衛： beforeEnter、afterEnter
在路由配置上直接定義，只有該路由會被守衛

routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}} ] //或者 let userIn = (to, from, next) => {// ... } routes: [{path: '/foo',component: Foo,beforeEnter: userIn}]

3. 組件內的守衛： beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
組件內的守衛 在組建中的 export default{} 中

三、插槽

如在 header 組件中添加插槽

使用：

效果：

四、打包小細節

找到 routers 文件夾下的 index.js 中替換掉原來的 base 為 base:"名稱"

vue.config.js配置中添加 publicPath : '/名稱',

如果還是打不開，在該項目下 “以管理員身份” 打開 cmd ,安裝 npm install http-server -g ，然后進入 cd dist 文件夾，輸入 http-server

用任意一個地址 + /index.html 打開，例如這里我用 http://127.0.0.1:8080/index.html
(1) 如果 http-server 安裝不成功，檢查是否是在 管理員身份 下運行，必須在管理員身份下才能運行。
（2）http-server 不是內部命令的問題：在cmd 上輸入 npm config ls,檢查npm 的安裝路徑，復制 prefix 中的路徑，把它添加到 環境變量中，注意環境變量中只有一個 \

（3）怎么配置環境變量：如下圖方式打開

屬性->高級系統設置->高級->環境變量 ->path ->編輯

http-server 后還報404？配 nginx
https://blog.csdn.net/qq_35437791/article/details/97271373

打包后如果想繼續查看項目，記得注釋掉 publick:"./"，否則會報錯，報錯如下

總結

以上是生活随笔為你收集整理的创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。