• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 编程式的导航

    除了使用<router-link>创建a标签来定义导航链接,我们还可以借助router的实例方法,通过编写代码来实现。

    导航到不同的位置

    通过在历史堆栈中推送一个entry,以编程方式导航到一个新的 URL。

    函数签名:

    router.push(to:RouteLocationRaw):Promise<NavigationFailure | void | undefined>
    参数类型描述
    toRouteLocationRaw要导航到的路由地址

    想要导航到不同的 URL,则使用router.push方法。这个方法会history栈添加一个新的记录。所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

    注意:在 Vue 实例内部,你可以通过$router访问路由实例。因此你可以调用this.$router.push


    当你点击<router-link>时,这个方法会在内部调用,所以说,点击<router-link :to="...">等同于调用router.push(...)

    声明式编程式
    <router-link :to="...">router.push(...)


    router.push()方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:

    // 字符串路径
    router.push('/users/eduardo')
    
    // 带有路径的对象
    router.push({ path: '/users/eduardo' })
    
    // 带查询参数,结果是 /register?plan=private
    router.push({ path: '/register', query: { plan: 'private' } })
    
    // 带 hash,结果是 /about#team
    router.push({ path: '/about', hash: '#team' })
    
    // 命名的路由,并加上参数,让路由建立 url
    router.push({ name: 'user', params: { username: 'eduardo' } })
    


    path能与query一起搭配使用。但是path不能与params一起搭配使用,如果提供了path选项,那么params选项会被忽略。


    你需要提供路由的name或手写完整的带有参数的path

    const username = 'eduardo'
    
    // 我们可以手动建立 url,但我们必须自己处理编码
    router.push(`/user/${username}`) // -> /user/eduardo
    // 同样
    router.push({ path: `/user/${username}` }) // -> /user/eduardo
    
    // 如果可能的话,使用 `name` 和 `params` 从自动 URL 编码中获益
    router.push({ name: 'user', params: { username } }) // -> /user/eduardo
    
    // `params` 不能与 `path` 一起使用
    router.push({ path: '/user', params: { username } }) // -> /user
    

    由于属性torouter.push接受的对象种类相同,所以两者的规则完全相同。

    router.push和所有其他导航方法都会返回一个Promise,让我们可以等到导航完成后才知道是成功还是失败。


    替换当前位置

    通过替换历史堆栈中的当前entry,以编程方式导航到一个新的 URL。

    函数签名:

    router.replace(to:RouteLocationRaw):Promise<NavigationFailure | void | undefined>
    参数类型描述
    toRouteLocationRaw要导航到的路由地址

    router.push很像,唯一的不同就是,它不会向history添加新记录,而是替换当前的条目。


    声明式编程式
    <router-link :to="..."replace>router.replace(...)


    也可以直接在传递给router.pushrouteLocation中增加一个属性replace: true

    router.push({ path: '/home', replace: true })
    
    // 相当于
    router.replace({ path: '/home' })
    


    横跨历史

    允许你在历史中前进或后退。

    函数签名:

    router.go(n:number):void
    参数类型描述
    nnumber相对于当前页面,你要移动到的历史位置

    这个方法的参数是一个整数,意思是在history记录中向前或者后退多少步,类似window.history.go(n)


    向前移动一条记录:

    router.go(1)
    
    等价
    router.forward()
    

    返回一条记录:

    router.go(-1)
    
    等价
    router.back()
    


    前进 3 条记录

    router.go(3)
    


    如果没有那么多记录,静默失败

    router.go(-100)
    router.go(100)
    



    操作 History

    用于路由实现历史记录。大多数 web 应用程序都应该使用createWebHistory(),但它要求正确配置服务器。你还可以使用createWebHashHistory()的基于 hash 的历史记录,它不需要在服务器上进行任何配置,但是搜索引擎根本不会处理它,在 SEO 上表现很差。

    函数签名:

    history:RouterHistory
    createRouter({
      history: createWebHistory(),
      // 其他配置...
    })
    


    你也许注意到router.pushrouter.replacerouter.gowindow.history.pushStatewindow.history.replaceStatewindow.history.go好像,实际上它们确实是效仿window.history API 的。

    因此,如果你已经熟悉 Browser History APIs,那么在 Vue Router 中操作 history 就是超级简单的。

    值得一提的是,无论在创建路由器实例时传递什么样的history配置,Vue Router的导航方法(pushreplacego),都能始终如一地工作。

    上篇:嵌套路由

    下篇:命名路由