element ui框架(重定向、404和路由模式)
【 聲明:版權所有,歡迎轉載,請勿用於商業用途。 聯繫信箱:feixiaoxing @163.com】
前面我們陸續討論了關於網頁路由、子路由、路由傳參等問題,事實上路由還有一些需要注意的地方,這裏也一併討論下。
1、重定向
重定向是web後端開發經常遇到的問題,只不過現在從後端轉到了前端而已。我們可以舉例説明那個,如何試下重定向功能。首先,在router/index.js添加選項,
{ path: '/Main/:name', name: 'Main', component: Main, children :[ { path: '/Member/Level/:id', //id為需要傳遞的參數 name:'MemberLevel', component: MemberLevel, props:true // 添加props屬性 }, { path: '/Member/List', name:'MemberList', component: MemberList, }, { path: '/Redirect', redirect: '/Member/List' } ] }
閲讀代碼發現,/Redirect和/Member/List指向了同一個鏈接。這樣就可以通過在Main.vue裏面添加一個超鏈接來驗證了,
<el-menu-item index="1-3"> <router-link to="/Redirect">重定向</router-link> </el-menu-item>
2、404
404是經常遇到的另外一個問題。當然,要實現這個目標,第一步要做的就是先創建一個vue文件,也就是目標網頁訪問失敗後看到的那個網頁。比如,這個文件可以命名為NotFound.vue,內容如下所示,
<template> <div>404</div> </template> <script> export default { name:"NotFound" } </script> <style> </style>
第二步,就是將這個vue文件和相關的url實現匹配關聯即可。要做到這個,只需要添加一條路由就可實現這個目標,
{ path:'*', component:NotFound }
3、路由模式
所謂的開啟路由模式,就是在輸入網頁的時候,去除url中的#符號。比如我們想查看MemberList的時候,vue就會自動生成 http://127.0.0.1:8082/#/Member/List 。如果我們想去除#這個符號,只需要在路由表裏面添加一個mode屬性即可,
export default new Router({ mode: 'history', //添加的模式 routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/Login', name: 'Login', component: Login }, { path: '/Main/:name', name: 'Main', component: Main, children :[ { path: '/Member/Level/:id', //id為需要傳遞的參數 name:'MemberLevel', component: MemberLevel, props:true // 添加props屬性 }, { path: '/Member/List', name:'MemberList', component: MemberList, }, { path: '/Redirect', redirect: '/Member/List' } ] }, { path:'*', component:NotFound } ] })
這樣,相關網頁就可以直接用ip打開,不再需要#號,
「其他文章」
- element ui框架(登陸狀態保存)
- element ui框架(axios使用和跨域調試)
- element ui框架(重定向、404和路由模式)
- element ui框架(路由參數傳遞)
- element ui框架(嵌套路由)
- element ui框架(路由)
- element ui框架(webpack打包器)
- element ui框架(第一個element ui程序)
- element ui框架(準備)
- vue學習(基礎下)
- 前端開發(和webpy後端聯調)
- java和設計模式(工廠方法)
- java上位機開發(log4j的使用)
- java上位機開發(jdbc)
- java上位機開發(c庫調用)
- java上位機開發(java基礎)
- stm32和電機開發(從mcu到架構設計)
- 嵌入式軟件設計(mcu內部flash讀寫)
- 嵌入式軟件設計(看門狗)
- 嵌入式軟件設計(按鍵輸入)