Vue全家桶（2.4）

.page{border:1pxsolid#ccc;复制代码背景色：#ccc；高度：800px；background-color:aquamarine;}3.6。重定向和别名#3.6.1。重定向route重定向通俗地说就是从一条路由重定位到另一条路由，例如：“/a”访问重定向到“/b”也是通过配置路由选项routes:[{path:'/course',component:Course},{path:'/hello',component:Hello,redirect:'/course'}]上面代码中访问'/hello'不会渲染Hello组件，而是会跳转到路由'/course'来呈现课程组件。重定向的目标可以是命名路由routes:[{path:'/questions',name:'wenda',component:Questions},{path:'/hello',component:Hello,redirect:{name:'wenda'}}]上面代码配置后，访问'/hello'会跳转到命名路由'wenda'，即'/questions'，从而渲染Questions组件的重定向目标也可以是一个方法，方法中可以写一些逻辑代码{path:'/hello',component:Hello,redirect:(to)=>{if(to.hash){return'/questions'}else{return'/course'这里to是一个对象，你可以试着把它打印出来看看里面有什么What'sinit#3.6.2。Alias别名从字面上理解就是另一个名字，比如有的人有一个中文名，另一个英文名。例如：'/hello'有一个别名'/hi'，当用户访问'/hi'时，url会保持不变，但是'/hello'对应的组件仍然会被渲染，说白了，没有不管用户访问'/hello'，还是'/hi'，都是同一个人（Hello组件）routes:[{path:'/hello',component:Hello,alias:'/hi'}]#3.7.程序化导航#3.7.1。声明式导航我们所学习的以这种方式定义导航链接的方式称为声明式导航。特点是在tempalte中写跳转链接，通过生成标签

• Homepage
• 课程
• 成员
• 问题和答案

#3.7.2。程序化导航程序化导航通俗地说就是vue-router为我们提供了一堆方法。我们通过js写代码实现导航切换。这些常用方法包括：back、forward、go、push、replace等。1.push如果要导航到不同的URL，请使用router。推法。此方法将向历史堆栈添加一条新记录.page{border:1pxsolid#ccc;复制代码背景色：#ccc；高度：800px；background-color:aquamarine;}注意：在Vue实例内部，可以通过$router访问路由实例2.replace和router.push非常相似，唯一不同的是不会往里面添加新的记录history，但是和它有相同的方法名——替换当前的历史记录methods:{pushHandle(){//this.$router.push('/hello')push直接给字符串//push里面可以给对象this.$router.push({name:'wenda'})},replaceHandle(){this.$router.replace('/questions')}}3.back方法可以返回上一步methods:{pushHandle(){//this.$router.push('/hello')直接push到字符串//push可以给对象this.$router.push({name:'wenda'})},replaceHandle(){this.$router.replace('/questions')},backHandle(){//回到上一步this.$router.back()}}4.forward的forward方法可以向前移动methods:{pushHandle(){//this.$router.push('/hello')pushinternal直接给字符串//push可以给里面的对象this.$router.push({name:'wenda'})},replaceHandle(){this.$router.replace('/questions')},backHandle(){//回到上一步this.$router.back()},forwardHandle(){//向前走一步this.$router.forward()}}}5.gogo方法可以一次跳过多个步骤methods:{pushHandle(){//this.$router.push('/hello')直接push到字符串里面//push可以给对象this.$router.push({name:'wenda'})},replaceHandle(){this.$router.replace('/questions')},backHandle(){this.$router.back()},forwardHandle(){this.$router.forward()},goHandle(){//前进2步注意：go中如果是正数表示前进，如果是负数，则表示向前向后this.$router.go(2)}}}