GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~
一、介绍
1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击login按钮时,页面就显示login的内容,也可以说是一种映射,所有在页面上有两个部分,一个是点击部分,一个是显示部分。
2.路由中有三个基本的概念,route,routes,router。
1.route:它是一个路由,是一个单数,点击Home按钮->Home内容
2.routes:它是一组路由,把每一条路由组合起来,串接起来形成一个数组;[{home按钮=>home内容},{about按钮=>about内容}]
3.router:它是一个机制,相当于一个管理者,来管理所有路由;
4.客户端中的路由原理:实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.
二、Vue路由绑定
1.最常用的路由绑定方式 <router-link to="/admin" class="nav-link">管理</router-link> 2.对路由name进行绑定 {path:‘/about‘,name:‘aboutlink‘,redirect:‘/about/contact‘,component:About} <router-link :to="{name:‘aboutlink‘}" class="nav-link">关于我们</router-link> 3.对数据进行绑定 data(){ return{ menu:‘/menu‘, } } <router-link :to="menu" class="nav-link">菜单</router-link>
三、Vue路由跳转
1.跳到上一次浏览页面 this.$router.go(-1) 2.跳到指定位置 this.$router.replace(‘/name‘) 3.跳到指定路由名字下 this.$router.replace({name:‘aboutlink‘}) 4. 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)=>{} 具体怎么使用的就不一一介绍了,也是很简单的.
原文地址:https://www.cnblogs.com/alongup/p/9065208.html
时间: 2024-11-08 15:55:07