Vue Router路由机制

前端路由是单页应用的基石之一,它可以在不刷新页面的前提下,显示不同的页面内容。

Vue Router是Vue官方提供的路由管理器,它可以让我们更简单易用地实现SPA应用。Vue Router的工作原理是通过监听URL的变化,然后匹配不同的路由规则,渲染对应的组件。它基于Vue的组件系统,会将匹配的组件渲染在<router-view>占位符内。

Vue Router主要由路由器、路由匹配、路由异步数据等几部分组成。路由器:包含路径与组件的映射关系,并可以监听URL变化触发组件切换。

路由匹配:Vue Router使用path-to-regexp进行路径匹配,支持参数、正则等多种匹配方式。路由异步数据:通过路由元信息中的asyncData()方法进行数据预取,实现组件异步渲染。

在Vue项目中使用Vue Router主要有以下几步:

1. 安装:npm install vue-router

2. 在js引入:import router from './routerr'

 

3. 定义路由组件和路由映射: const routes = [] //(一般在router文件夹下定义)

4. 实例化路由器:const router = new VueRouter({ routes })

 

5. 注入到Vue根实例:router: router

6. 使用<router-link>和<router-view>进行路由链接切换和匹配组件渲染，使用router-view标签来表示要添加的页面

 

7. 路由守卫:用于对路由进行权限控制和校验

8. 路由元信息:用于组件异步数据加载

9. 命名路由和带参数路由Vue Router通过 hash 或 history 模式控制路由与 URL 的映射与切换,实现SPA应用的前端路由功能