vue3 router 和 route 路由

在 Vue.js 3 中，确实没有 $router 和 $route 这样的全局实例属性。这是因为在 Vue.js 3 中，Vue Router 的 API 发生了变化，需要使用 createRouter 函数创建路由实例，并将其作为根组件选项中的 router 属性进行注入。

以下是一个简单的示例，展示如何在 Vue.js 3 中使用 Vue Router：

javascript复制代码
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

const app = createApp({
  // 根组件
});

// 将路由实例注入根组件
app.use(router);

// 挂载根组件
app.mount('#app');

在上面的代码中，我们首先通过 createRouter 函数创建一个路由实例，并配置了两个路由规则：一个是 '/' 路径对应的 Home 组件，另一个是 '/about' 路径对应的 About 组件。

然后，我们通过 createApp 函数创建一个根组件，并使用 app.use(router) 注入路由实例。最后，我们将根组件挂载到页面上。

有了这个设置后，我们就可以在组件内部使用新的 Router API 了，例如使用 useRoute 和 useRouter Hook 来访问 $route 和 $router 对象：

复制代码
<template>
  <div>
    <h1>{{ $route.path }}</h1>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();

    function goToAbout() {
      router.push('/about');
    }

    return {
      route,
      goToAbout
    };
  }
};
</script>

在上面的代码中，我们使用了 useRoute 和 useRouter Hook 分别获取 $route 和 $router 对象，并在模板中展示当前路由路径和一个按钮。当用户点击按钮时，我们通过 $router.push 方法导航到 /about 路径。注意，在 Vue.js 3 中，我们需要使用 setup 函数来编写组件逻辑。