安装vue router在开始使用vue router之前，我们需要安装它。通过npm安装vue router:
$ npm install vue-router
vue router的基本结构在vue中，一个路由就是一个url地址和组件之间的对应关系。下面是vue router的基本结构：
const router = new vuerouter({ mode: 'history', routes: [ { path: '/', name: 'home', component: home }, { path: '/about', name: 'about', component: about } ]})
使用官方提供的构造函数vuerouter，我们可以创建一个新的路由实例。在这个实例中，我们定义了路由模式和路由规则。路由模式有两种，一种是hash模式，另一种是history模式，这里我们选择history模式。路由规则分为多个路由，每个路由都有一个路径（path），名称（name）和对应的组件（component）。
路由的渲染方式要在vue应用程序中使用路由，我们需要先设置一个router-view组件来承载路由对应的部分。根据组件位置和路由规则的路径匹配，vue会自动将正确的组件渲染到对应的位置。如下所示：
<template> <div id="app"> <header> <router-link to="/">home</router-link> <router-link to="/about">about</router-link> </header> <router-view></router-view> </div></template>
在这个例子中，路由组件将会显示在router-view组件里面。
使用动态参数有时，我们需要在路由中使用动态参数。例如，在一个博客应用中，我们需要按文章id获取文章内容。在后端，url会带有一个动态的文章id参数，如“/blog/123”，其中123就是文章id。在vue中，我们可以使用路由规则中设置动态参数：
const router = new vuerouter({ mode: 'history', routes: [ { path: '/blog/:id', name: 'blog', component: blog } ]})
在这个例子中，我们定义了一个带有动态参数的路由规则。参数是以冒号开始的，例如“:id”。当匹配到“/blog/123”时，“123”将会是一个动态的参数。同时，在组件中使用该参数也非常容易：
export default { data () { return { postid: null } }, created () { this.postid = this.$route.params.id // 根据post id获取文章 }}
在组件实例中，可以通过this.$route.params.id获取参数。
编程式导航在章节一开始，我们创建了一个vue router实例。使用这个实例，我们可以通过编程式的方式，实现路由的切换。vue router提供了两个方法来实现编程式导航：$router.push()和$router.replace()。
在上面的例子中，有两个路由按钮，它们分别连接到不同的路由。通过路由按钮的点击事件，我们可以在底层的javascript中使用$router.push()来导航到特定的路由：
<template> <div id="app"> <header> <button @click="$router.push('/')">home</button> <button @click="$router.push('/about')">about</button> </header> <router-view></router-view> </div></template>
navigation guards在路由切换时，我们可能需要进行一些操作，比如授权、加载数据等。vue router提供了navigation guards来解决这个问题。navigation guards是一堆函数，它们可以在路由导航时执行，例如在跳转到某个路由之前、之后或进入路由时。vue router提供了三种navigation guards：全局guard、组件guard和路由guard。
全局guard全局guard是在整个应用中定义的guard，在所有页面生效。vue router提供了一些全局guard，包括：
beforeeach(to, from, next): 在进入路由之前执行。aftereach(to, from): 在路由进入后执行。组件guard组件guard是在组件内定义的guard，在进入该组件时执行。vue router提供了以下组件guard：
beforerouteenter(to, from, next): 在进入组件之前执行，无法访问组件实例。beforerouteupdate(to, from, next): 在路由更新时执行，可以访问组件实例。beforerouteleave(to, from, next): 在离开组件时执行，可以访问组件实例。路由guard路由guard是在路由定义时定义的guard，在特定的路由中生效。vue router提供了以下路由guard：
beforeenter(to, from, next): 在进入路由之前执行，只在该路由生效。beforeresolve(to, from, next): 在路由进入时执行，可以访问组件实例。总结路由是vue应用程序中非常重要的一部分，vue router为我们提供了一种简单的方式来管理路由。在本文中，我们介绍了vue router的基本结构、渲染方式、动态参数、编程式导航和navigation guards。vue router是一个强大且易于使用的路由库，如果你想扩展你的vue应用程序，请务必参考这些文档中提供的api。
以上就是vue文档中的路由函数的使用方法的详细内容。