vue router通过 vue.js，我们已经用组件组成了我们的应用。当加入 vue router 时，我们需要做的就是将我们的组件映射到路由上，让 vue router 知道在哪里渲染它们。【相关推荐：vue.js视频教程】
vue router的使用声明式使用 router-link 组件进行导航，通过传递 to 来指定链接。
b988a8fd72e5e0e42afffd18f951b277 将呈现一个带有正确 href 属性的 3499910bf9dac5ae3c52d5ede7383485 标签。
官方示例：
<script src="https://unpkg.com/vue@3"></script><script src="https://unpkg.com/vue-router@4"></script><div id="app"> <h1>hello app!</h1> <p> <router-link to="/">go to home</router-link> <router-link to="/about">go to about</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view></div>
这里没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 vue router 可以在不重新加载页面的情况下更改 url，处理 url 的生成以及编码。
router-view
router-view 将显示与 url 对应的组件。可以把它放在任何地方，以适应布局。
编程式导航除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
想要导航到不同的 url，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 url。
当点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：
声明式编程式
<router-link :to="..."> router.push(...)
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。
// 字符串路径router.push('/users/eduardo')// 带有路径的对象router.push({ path: '/users/eduardo' })// 命名的路由，并加上参数，让路由建立 urlrouter.push({ name: 'user', params: { username: 'eduardo' } })// 带查询参数，结果是 /register?plan=privaterouter.push({ path: '/register', query: { plan: 'private' } })// 带 hash，结果是 /about#teamrouter.push({ path: '/about', hash: '#team' })
注意：如果提供了 path，params 会被忽略
// `params` 不能与 `path` 一起使用router.push({ path: '/user', params: { username } }) // -> /user
替换当前位置作用与router.push类似，不同的是，它在导航时不会向 history 添加新记录
声明式编程式
<router-link :to="..." replace> router.replace(...)
也可以直接在传递给 router.push 的 routelocation 中增加一个属性 replace: true：
router.push({ path: '/home', replace: true })// 相当于router.replace({ path: '/home' })
横跨历史该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于window.history.go(n)。
// 向前移动一条记录router.go(1)// 相当于router.forward()// 返回一条记录router.go(-1)// 相当于router.back()// 前进 3 条记录router.go(3)// 如果没有那么多记录，静默失败router.go(-100)router.go(100)
以上就是深析vue router-link组件实现路由导航的详细内容。