# Online開發如何配置 Href 跳轉 [TOC] ## 效果演示 配置了 href 的字段將會顯示為超鏈接，可以點擊跳轉到你配置的界面，如下圖所示  ## 配置位置  ## 配置方式 直接在輸入框里輸入你要跳轉的地址即可，可以傳遞參數，目前支持三種跳轉方式，分別為 1. http或https鏈接跳轉 2. 路由(router)地址跳轉 3. 內部組件跳轉 ### 配置實例：http或https鏈接跳轉 假如說我想跳轉到百度頁面，可以在字段href里填寫 `https://www.baidu.com`，注意，開頭的`http`或`https`一定要填寫，如果不填就會被識別成“路由地址跳轉”。  ### 配置實例：路由(router)地址跳轉 假如說我想跳轉到菜單里配置的某個頁面，就輸入該菜單的路徑即可 比如首頁的路徑為`/dashboard/analysis`  那么只需填寫到輸入框里即可  ### 配置實例：內部組件跳轉 假如說我寫了一個組件，而且沒有配置成菜單，但也想在這里打開的時候，就可以使用內部組件跳轉。 你只需要提供一個組件的路徑，如下圖所示： 注意，你只能使用 `/src/views` 下的所有組件，且填寫時開頭無需填寫 `/`，且一定要包含`.vue`，否則將會被識別成“路由地址跳轉”。 比如我要彈出一個自定義的頁面，頁面代碼位置如下圖所示：  配置字段href：`demo/hello/index.vue`  ## 如何傳參 無論是哪一種配置方式，都采用問號(?)的方式傳參，多個參數用`&`符號分割 ``` ?name=zhangsan&age=23&sex=男 ``` ### 可使用變量 你可以在參數里使用變量，變量的名稱取決于你配置了哪些字段  如上圖所示，我的配置中有一個`teacher_name`字段，那么我就可以在使用的時候取出來，傳給你配置的鏈接 ``` ?name=${teacher_name}&ohh=233 ``` 實際使用中，如果我點擊了 趙六  那么實際參數會被轉換為 ``` ?name=趙六&ohh=233 ``` ## 如何接收參數 ### http或https鏈接跳轉 可以在后臺用 `request` 獲取 ### 路由(router)地址方式  參考代碼： ``` watch: { $route: { immediate: true, handler() { console.log('============= online href $route props ============= '); let sex = this.$route.query.sex console.log('$route sex: ', sex); } } }, ``` ### 內部組件方式 內部組件使用 props 來接收參數，傳給組件的類型永遠都是`String`類型，所以你試圖用其他類型（如`Number`）接收的時候會報錯。