Vue compositionAPI中setup函数如何访问路由

最近尝试使用compositionAPI仿cnode网站,在写路由跳转时遇到了一个问题,在setup函数中无法访问到$router对象。

在Vue2.x中可以在methods选项中的函数可以通过this访问到$router对象,因为this是当前vue实例;但是在setup函数中this是undefined,无法通过this来访问$router对象。于是又想到了,setup函数的第二个参数是context,那么context上是否有$router对象呢?经过实践和查找文档,发现context上并没有$router对象,只有如下属性:

Vue compositionAPI中setup函数如何访问路由_第1张图片

那这么办呢?我想到了root是vue的根实例,实例上应该有$router对象,于是可以通过root.$router访问到路由对象

setup(props, { root }) {
    let searchText = ref("");
    const onSearch = searchText => {
      console.log(searchText);
    };
    const jumpToHome = () => {
      root.$router.push("/");
    };
    const jumpToNoob = () => {
      root.$router.push("/getstart");
    };
    const jumpToApi = () => {
      root.$router.push("/api");
    };
    const jumpToAbout = () => {
      root.$router.push("/about");
    };
    const jumpToLogin = () => {
      root.$router.push("/login");
    };
    return {
      searchText,
      onSearch,
      jumpToHome,
      jumpToNoob,
      jumpToApi,
      jumpToAbout,
      jumpToLogin
    };

这样就可以完成路由的跳转了。

你可能感兴趣的:(vue)