1、簡單重定向
】
{path:"third",redirect:"first"}
2、簡單url重定向
{path:"/aaa/:id",component:firstFirst},
{path:"/bbb/:id",redirect:"/aaa/:id"}
<li><router-link to="/aaa/123">aaa</router-link></li> <li><router-link to="/bbb/456">bbb</router-link></li>
3、redirect通過封裝函數重定向傳值
{path:"/ccc/:id",redirect:xxxx => {
const {hash,params,query} = xxxx;
if(params.id=="001"){
return '/'
}
}}
<li><router-link to="/ccc/001">ccc</router-link></li>
全部代碼：
1 import Vue from 'vue' 2 import VueRouter from 'vue-router' 3 Vue.use(VueRouter) 4 5 const first = {template:'<div>這是first內容</div>'} 6 const second = {template:'<div>這是second內容</div>'} 7 const Home = {template:'<div>這是Home內容</div>'} 8 const Home2 = {template:'<div>這是Home2222內容</div>'} 9 10 const firstFirst = {template:'<div>這是firstFirst內容 {{ $route.params.id }} </div>'} 11 const firstSecond = {template:'<div>這是firstSecond內容 {{ $route.params.id }}</div>'} 12 const sld={ 13 template:` 14 <div class="sld"> 15 <h2>二級組件</h2> 16 <router-view class="abc"></router-view> 17 </div> 18 ` 19 } 20 21 const router = new VueRouter({ 22 mode:"history", 23 base:__dirname, 24 routes:[ 25 {path:"/",name:"Home",components:{ 26 default:Home, 27 left:first, 28 right:second 29 }}, 30 {path:"/first",component:sld, 31 children:[ 32 {path:"/",name:"Home-first",component:first}, 33 {path:"first",name:"Home-first-first",component:firstFirst}, 34 {path:"second",name:"Home-first-second",component:firstSecond}, 35 {path:"third",redirect:"first"} 36 ] 37 }, 38 {path:"/second",name:"Home-second",components:{ 39 default:Home2, 40 left:first, 41 right:second 42 43 }}, 44 {path:"/params/:aaa/:bbb"}, 45 {path:"/aaa/:id",component:firstFirst}, 46 {path:"/bbb/:id",redirect:"/aaa/:id"}, 47 {path:"/ccc/:id",redirect:xxxx => { 48 const {hash,params,query} = xxxx; 49 if(params.id=="001"){ 50 return '/' 51 } 52 }} 53 ] 54 }) 55 56 new Vue({ 57 router, 58 template:` 59 <div id="r"> 60 <p>{{$route.name}}</p> 61 <ul> 62 <li><router-link to="/">/</router-link></li> 63 <li><router-link to="/first">first</router-link> 64 <ul> 65 <li><router-link :to="{name:'Home-first-first',params:{id:111111}}">first</router-link></li> 66 <li><router-link :to="{name:'Home-first-second',params:{id:222222}}">second</router-link></li> 67 <li><router-link to="third">third</router-link></li> 68 </ul> 69 </li> 70 <li><router-link to="/second">second</router-link></li> 71 <li><router-link to="/aaa/123">aaa</router-link></li> 72 <li><router-link to="/bbb/456">bbb</router-link></li> 73 <li><router-link to="/ccc/001">ccc</router-link></li> 74 </ul> 75 <router-view class="abc"></router-view> 76 <router-view class="abc" name="left" style="float:left;width:50%;height:300px;background:#1E88DA"></router-view> 77 <router-view class="abc" name="right" style="float:right;width:50%;height:300px;background:#ff0000"></router-view> 78 </div> 79 ` 80 }).$mount("#app")
4、路徑錯誤設置404報錯方法：
路由中404路徑為*，專門把路徑寫錯成qqqqqqqqqqqqqqqqqq，效果如下：
注：404 path:' * '必須放在路由最后一個