vue中的路由

原创
小哥 2年前 (2023-05-15) 阅读数 42 #大杂烩

路由的跳转方式

  • 使用 映射路由

只需要跳转页面,不需要添加验证方法的情况,可以使用 来实现导航的功能:会被渲染为 标签, to 会被渲染为 href

  • 编程式导航:
  1. this.$router.push() 跳转到不同的url,但这个方法回向history栈添加一个记录,点击后退会返回到上一个页面。

  2. this.$router.replace() 描述:同样是跳转到指定的url,但是这个方法不会向history里面添新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。

  3. this.$router.go(n) 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

  • 嵌套路由: 你需要在组件中使用 可以传递props,支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果,被渲染的组件将注册到父级组件的this.$对象上。

  • 在配置的路由后面,添加 children,并在 children 中添加二级路由,就能实现路由嵌套。                                             配置 path 的时候,以 " / " 开头的嵌套路径会被当作根路径,所以子路由的 path 不需要添加 " / "。

  • 使用路径名称name :定义路径规则的时候,如果你给它提供了一个name属性,则可以在后续使用这条路径规则的时候,直接引用。

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

热门