]
{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>
全部代码:
- import vue from 'vue'
- import VueRouter from 'vue-router'
- Vue.use(VueRouter)
- const first = {template:'<div > 这是 first 内容 </div>'}
- const second = {template:'<div > 这是 second 内容 </div>'}
- const Home = {template:'<div > 这是 Home 内容 </div>'}
- const Home2 = {template:'<div > 这是 Home2222 内容 </div>'}
- const firstFirst = {template:'<div > 这是 firstFirst 内容 {{ $route.params.id }} </div>'}
- const firstSecond = {template:'<div > 这是 firstSecond 内容 {{ $route.params.id }}</div>'}
- const sld={
- template:`
- <div class="sld">
- <h2 > 二级组件 </h2>
- <router-view class="abc"></router-view>
- </div>
- `
- }
- const router = new VueRouter({
- mode:"history",
- base:__dirname,
- routes:[
- {path:"/",name:"Home",components:{
- default:Home,
- left:first,
- right:second
- }},
- {path:"/first",component:sld,
- children:[
- {path:"/",name:"Home-first",component:first},
- {path:"first",name:"Home-first-first",component:firstFirst},
- {path:"second",name:"Home-first-second",component:firstSecond},
- {path:"third",redirect:"first"}
- ]
- },
- {path:"/second",name:"Home-second",components:{
- default:Home2,
- left:first,
- right:second
- }},
- {path:"/params/:aaa/:bbb"},
- {path:"/aaa/:id",component:firstFirst},
- {path:"/bbb/:id",redirect:"/aaa/:id"},
- {path:"/ccc/:id",redirect:xxxx => {
- const {hash,params,query} = xxxx;
- if(params.id=="001"){
- return '/'
- }
- }}
- ]
- })
- new Vue({
- router,
- template:`
- <div id="r">
- <p>{{$route.name}}</p>
- <ul>
- <li><router-link to="/">/</router-link></li>
- <li><router-link to="/first">first</router-link>
- <ul>
- <li><router-link :to="{name:'Home-first-first',params:{id:111111}}">first</router-link></li>
- <li><router-link :to="{name:'Home-first-second',params:{id:222222}}">second</router-link></li>
- <li><router-link to="third">third</router-link></li>
- </ul>
- </li>
- <li><router-link to="/second">second</router-link></li>
- <li><router-link to="/aaa/123">aaa</router-link></li>
- <li><router-link to="/bbb/456">bbb</router-link></li>
- <li><router-link to="/ccc/001">ccc</router-link></li>
- </ul>
- <router-view class="abc"></router-view>
- <router-view class="abc" name="left" style="float:left;width:50%;height:300px;background:#1E88DA"></router-view>
- <router-view class="abc" name="right" style="float:right;width:50%;height:300px;background:#ff0000"></router-view>
- </div>
- `
- }).$mount("#app")
- View Code
来源: http://www.bubuko.com/infodetail-3135564.html