怎么使用Vuerouter-link组件实现路由导航
今天小编给大家分享一下怎么使用Vue router-link组件实现路由导航的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
创新互联是一家专业提供于都企业网站建设,专注与成都做网站、网站设计、H5开发、小程序制作等业务。10年已为于都众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
Vue Router
通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。
Vue Router的使用
声明式
使用 router-link组件进行导航，通过传递 to 来指定链接。
href 属性的
官方示例：
Hello App!
Go to Home
Go to About
这里没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。
router-view
router-view 将显示与 url 对应的组件。可以把它放在任何地方，以适应布局。
编程式导航
除了使用
想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。
当点击 router.push(...) ：
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })注意：如果提供了 path，params 会被忽略
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user替换当前位置
作用与router.push类似，不同的是，它在导航时不会向 history 添加新记录
| 声明式 | 编程式 | | 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组件实现路由导航”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。
分享名称：怎么使用Vuerouter-link组件实现路由导航
网页URL：
http://cdkjz.cn/article/jigojc.html
