深入了解Vue路由

ByMattMaribojoc力的功能之一。SPA很棒，因为它们不需要在每次更改路由时都加载页面。这意味着一旦加载了全部内容，就可以非常快速地切换视图并提供出色的用户体验。如果要基于Vue构建SPA，就需要Vue路由。在本教程中，我将介绍设置Vue路由器的基础知识，并介绍一些更高级的技术，例如：动态路由匹配导航挂钩什么是Vue路由？Vue路由有助于在浏览器的URL或历史记录与Vue组件之间创建链接，允许某些路由呈现与其关联的任一视图。VueCore团队成员EduardoSanMartinMorote在他的VueConfToronto演讲中分享了很多关于Vue路由背后的设计思想。Morote讨论了灵活路由（开发者有更多自主权，但需要编写更多代码）和刚性路由（开发者自主权较少，但路由涵盖更多用例）之间进行权衡时背后的决策过程。Vue基于配置的路由旨在为开发人员提供针对常见应用场景的工具和针对特殊问题的灵活性。在继续学习一些更高级的Vue路由之前，让我们先介绍一下基础知识。Vue路由的快速设置从一个快速创建Vue路由器的简单示例开始。虽然您可以使用vue-cli轻松添加Vue路由，但我认为您应该知道如何自己做。只有这样，才能真正了解Vue路由的每一个细节。首先使用npminstallvue-router将VueRouter添加到我们的项目中。然后通过src/main.js文件将其包含在Vue实例中。importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'//loadsfromsrc/router/index.jsnewVue({router,render:h=>h(App),}).$mount('#app')完成所有设置后，开始创建路由。在src中，创建一个src/router文件夹，其中包含一个包含以下内容的index.js文件。从'vue'导入Vue从'vue-router'导入VueRouter从'../views/Home.vue'导入主页从'../views/Profile.vue'导入配置文件Vue.use（VueRouter）;constroutes=[{path:"/",name:"home",component:Home},{path:'/profile',name:'profile',component:Profile}]constrouter=newVueRouter({模式:'history',routes})exportdefaultrouter这个代码段使用两个路由组件来匹配初始化VueRouter。我不会在这里详细介绍Home和Profile组件，您只需假设它们分别输出“home”和“profile”即可。显示路由视图之前已经设置了vue路由，但是没办法查看效果。这就是元素发挥作用的地方。本质上，router-view元素为VueRouter提供了一个在当前URL解析后渲染相应组件的地方。对于这个例子，我们将把它放在App.vue根组件中。添加更多链接，以便您可以在两条路线之间切换。VueRouter使用称为的特殊链接元素，其to属性可以映射到组件。当我们运行我们的应用程序时，我们应该能够看到home组件渲染。如果单击路由链接元素，内容将更改，URL也会更改！让我们深入了解VueRouter的更多细节。以编程方式更改路由在前面的示例中，我们使用在不同的路由之间导航。本质上，这些等同于VueRouter的标签（事实上，它们编译为标签）。但另一种更改路由的方法是使用router.push方法以编程方式导航。与使用类似，router.push接受使用其路径或名称映射到路由的字符串或对象。this.$router.push({path:'/profile'})//ORthis.$router.push({name:'profile'})使用此方法传递URL参数或查询也很容易。只需添加一个参数或查询参数。this.$router.push({path:'/profile',params:{username:'helloworld'},query:{source:'tutorial'}})history模式和hash模式的区别Vue路由URL有两种模式：历史和散列模式。哈希模式（默认）-使用URL哈希来模拟URL，例如mypage.com/#profileHistory-看起来像一个典型的URL，并使用history.pushState来避免页面重新加载；例如我的页面。com/profile我们的路由使用历史模式，因为我个人喜欢标准的URL外观。处理动态路由您可以将URL模式与组件匹配，而不必对每个可能的路径进行硬编码。这对于配置文章页面、个人资料页面和其他可以动态创建或删除的内容很有用。使用冒号:在Vue路由中定义动态路径。比如我们要动态匹配文章页面，路由应该是这样的。{path:'/post/:postID',name:'post',component:ArticlePage}此路由将按照/post/:postID模式将所有URL导航到相同的ArticlePage.vue组件。如果你想获取组件内部的postID，有两种方法可以实现。我们的postID可以通过$route.params对象在ArticlePage中访问，我们可以将文章ID作为道具传递给您的组件。我推荐第二种方法，因为它允许您构建更多不依赖于特定URL格式的可重用组件。只需将props:true添加到您的路线。添加这个属性后，我们的动态路由应该是这样的。{path:'/post/:postID',props:true,name:'post',component:ArticlePage}在组件中，您必须确保声明的prop名称与您在路由中声明的名称相同。在比较完整的项目中，我们通常使用路由来传递prop值，并通过API调用加载相应的内容。但是一旦你可以访问组件内部的prop，你就可以用它做任何事情。NavigationGuards介绍Navigationguards是VueRouter中比较高级的东西之一。它们是路由过程中的挂钩，允许您重定向、取消或修改导航。导航守卫分为三种：全局守卫组件中特定路由的守卫另外，守卫可以接受三个参数：to：我们要到达的路线from：要离开的路线next：用来解决Hook的函数；传递给next方法的参数，我们的路由会处理不同的导航next(false):中止导航，不要离开路由next('/home'):将我们的导航重定向到指定的路由next():如果没有参数，它将简单地移动到下一个Hook；确认导航没有剩余的Hook1。全局守卫全局守卫主要有两个措施：router.beforeEach()和router.afterEach()分别在导航解析之前和之后运行。让我们看一个例子。在这个方法中，首先检查用户是否可以访问某个页面，如果没有，路由解析将被阻止。请注意，每次Hook运行时只调用一次。router.beforeEach((to,next,from)=>{if(to.path==='/profile'){if(!hasAccess(to.path)){//只是一些任意条件next(false)//拒绝访问此页面}else{next()//继续移动到下一个钩子}}else{next()//继续移动到下一个钩子}})2.当我们在VueRouter中时特定于路由的守卫在a中声明路由时，您还可以添加一个beforeEnter函数，其功能类似于全局beforeEach路由，但它可以包含特定于路由的逻辑。{path:'/post/:postID',props:true,name:'post',component:ArticlePage,beforeEnter:(to,from,next)=>{//这里有一些逻辑}}3.在组件Guards中具体来说，我们可以在组件的options对象中插入navigationguards，一共有三种：beforeRouteEnter(to,from,next)：在这条路由被确认之前调用；该组件尚未创建。beforeRouteUpdate(to,from,next)：切换路由时调用；但新路线也可以确定这个组件。beforeRouteLeave(to,from,next)：离开组件时调用。请注意，在确认导航之前和实际创建组件之前，将调用beforeRouteEnter。目前我们还没有访问它。为了解决这个问题，beforeRouteEnter允许我们将回调传递给next方法，该方法将在组件实际创建后立即执行。beforeRouteEnter(to,from,next){next((vm)=>{//vm='this'console.log(vm)})}总结希望这篇文章可以帮助你学习一些基础和高级的Vue路由技术。探索灵活且易于使用的路由器所涉及的设计思想很有趣。听了莫罗特的讲述，我觉得以后可能会有更多的改进！扫码进入前端面试星球?，解锁刷题神器，领取800+前端面试真题和一线面试常用高频考点。