Vue路由学习心得详解编程语言

  GoodBoy and GoodGirl~进来了就看完点个赞再离开，写了这么多也不容易的~

 1.概念：路由其实就是指向的意思，当我们点击home按钮时，页面中就要显示home的内容，点击login按钮时，页面就显示login的内容，也可以说是一种映射，所有在页面上有两个部分，一个是点击部分，一个是显示部分。
     2.routes:它是一组路由，把每一条路由组合起来，串接起来形成一个数组；[{home按钮= home内容}，{about按钮= about内容}]
     4.客户端中的路由原理:实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.  二、Vue路由绑定

1.最常用的路由绑定方式 

 router-link to="/admin" 管理 /router-link 

2.对路由name进行绑定 

 {path:/about,name:aboutlink,redirect:/about/contact,component:About} 

 router-link :to="{name:aboutlink}" 关于我们 /router-link 

3.对数据进行绑定 

 data(){ 

 return{ 

 menu:/menu, 

 router-link :to="menu" 菜单 /router-link 

三、Vue路由跳转

1.跳到上一次浏览页面 

 this.$router.go(-1) 

2.跳到指定位置 

 this.$router.replace(/name) 

3.跳到指定路由名字下 

 this.$router.replace({name:aboutlink}) 

 this.$router.push(/name) 

 this.$router.push({name:aboutlink}) 

//{name:aboutlink}是路由配置是的name名称

四、路由重定向与错误时跳转

1.路由重定向 

 redirect:/home 

2.错误路径时跳转 

 {path:*,redirect:/}

五、路由守卫

Vue的路由守卫分为三种： 

 1.全局守卫 

 router.beforeEach((to,from,next)= {}) //前置守卫 

 router.afterEach((to,from)= {}) 

 2.组件内守卫 

 beforeRouterEnter:(to,from,next)= {} 

 beforeRouterLeave:(to,from,next)= {} 

 3.路由独享守卫 

 beforeEnter:(to,from,next)= {} 

 具体怎么使用的就不一一介绍了，也是很简单的.

 

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/12275.html

cgojava