今日观点!精通Vue.js系列 │ 路由管理器的基本用法

对于路由很复杂的应用，使用Vue Router可以简化对路由的管理，让源代码更加简洁、逻辑分明，而且容易进行模块化的开发。

1

(资料图片仅供参考)

路由管理器的基本用法

在例程1中，引入了Vue Router插件：

< src= "https://unpkg.com/vue-router@4">

myroute.html通过Router路由管理器来管理路由，为HomeComponent组件和AboutComponent组件设定了路由。当用户在网页上选择特定的链接，路由管理器就会显示相应的组件。

■例程1 myroute.html

在myroute.html中，根组件模板中的 组件和 组件都来自Router路由管理器。 组件用来生成导航链接：

< router-linkto= "/"> 主页 |

< router-linkto= "/about"> 关于我们

以上代码渲染后的结果为：

< ahref= "#/"> 主页 |

< ahref= "#/about"> 关于我们

根组件模板中的 组件会根据当前的路由显示相应的组件。假如用户访问的URL为myroute.html#/about，那么组件就会显示相应的AboutComponent组件。 组件可以放置在模板的任意位置，相当于一个占位标记，实际要显示的组件会被插入到 组件所在的位置。

在myroute.html的Java脚本中创建了一个路由管理器实例router：

constrouter = VueRouter.createRouter({

//设置hash路由模式

history: VueRouter.createWebHashHistory,

//设置路由

routes: myroutes

})

路由管理器的history属性指定路由模式。路由管理器的routes属性指定路由，即网页中待显示的各个组件和链接的对应关系。

Vue应用实例的use(router)函数使路由管理器会对应用进行路由管理：

constapp = Vue.createApp({})

app. use(router) //使用路由管理器

app.mount( "#app")

通过浏览器访问myroute.html，会得到如图1所示的网页。

■图1 myroute.html的网页

在myroute.html网页上选择“主页”或“关于我们”的链接，路由管理器就会根据它的routes属性所设定的路由，显示相应的HomeComponent组件或AboutComponent组件。

2

参考书籍

《精通Vue.js：Web前端开发技术详解（微课视频版）》

详细阐述用Vue框架的各种技术；深刻揭示前端开发的响应式编程核心思想；介绍与其他流行技术的整合；典型范例帮助读者迅速获得实战经验。

作者：孙卫琴，杜聚宾

价格：119元

扫码优惠购书

实例讲解

精通Vue.js：

Web前端开发技术详解

精彩回顾

1. Vue组件的命名规则

2 . 注册全局组件和局部组件

3 . 路由导航中抓取数据

下期预告

5. 命名路由

6. CSS中DOM元素的过渡模式

7. 插槽slot的基本用法

8. 组件的递归

9. 在Vue项目中使用Axios

10. 自定义指令v-drag范例

11. Vuex中的异步操作

12. 分割setup函数

13. Vue组件的单向数据流

14. Vue的数据监听

责任编辑：