vue中的路由重定向
程序员文章站
2022-03-25 08:52:25
...
<div id="app">
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/list" tag="button">列表页</router-link>
<!--当组件进行切换时,会将组件销毁-->
<router-view></router-view>
</div>
<script src="../../第一周/day1/node_modules/vue/dist/vue.js"></script>
<script src="../day2/node_modules/vue-router/dist/vue-router.js"></script>
<script>
let home = {
template:`<div><button>去列表页</button></div>`
};
let list = {
template:`<div><button>返回</button></div>`
}
let person={
template:`<div><button>404页面</button></div>`
};
// redirect: 重定向组件;
// 1. routes: [{ path: '/a', redirect: '/b' }]
// 2. routes: [{ path: '/a', redirect: {name:'路由名字'} }]
// 2. routes: [{ path: '/a', redirect:to=>{return ""} }]
//redirect:重定向组件 redirect:{name:"路由名字"}
let routes = [
{path:"/home",component:home},
{path:"/list",component:list},
{path:"/person",component:person},
{path:"*",redirect:"/person" }
//当想从别的路由跳转到 *(即任何不匹配前面几项路由的路由)时,
因为给*设置了重定向,所以直接跳转到了person上,
但是如果我们在*上设置的brforeEach,beforeLeave,是不会被触发的,
因为是在*上设置的,注意导航守卫并没有应用在跳转路由上,
而仅仅应用在其目标(person)上.
所以当你给*设置时,因为最终不会到*上,所以不会触发
];
let router = new VueRouter({
routes
});
let vm = new Vue({
el:"#app",
data:{
},
router
})
</script>
```
上一篇: flutter动画中AnimatedWidget的使用
下一篇: 在 CSS 动画中使用硬件加速