vue3使用vue-router的完整步骤记录

下面就是“Vue3使用Vue Router的完整步骤记录”的攻略。

使用Vue Router包

要使用Vue Router，首先需要安装vue-router包。可以使用npm安装，命令如下所示：

npm install vue-router@next

创建路由实例

Vue Router的创建需要在Vue实例之前，因为Vue Router的实例也要在Vue实例的中使用。在创建Vue Router实例时，需要导入需要使用到的Vue组件。

import { createRouter, createWebHistory } from 'vue-router';

// 导入组件
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

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

export default router;

以上代码中，我们首先导入了Vue Router的createRouter和createWebHistory方法，用于创建路由实例。然后我们导入需要使用到的Vue组件Home和About。最后，我们使用createRouter方法创建路由实例。

在创建路由实例时，我们还需要指定路由的history和routes。history指的是路由的模式，这里我们使用createWebHistory()表示使用了HTML5的history模式。routes指的是路由的配置，包括了每个路由对应的组件等信息。

注册路由实例

注册路由实例需要将其挂载到Vue实例上。我们可以在Vue实例的createApp方法中注册路由。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

以上代码中，我们使用use方法注册了路由实例。

使用路由

在Vue组件中使用Vue Router需要使用到$router和$route这两个对象。$router用于跳转路径，$route用于获取当前路径信息。

下面是一个简单的示例，可以帮助你快速了解使用Vue Router的方法。

<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

以上代码中，我们使用了router-link组件来跳转到About页面。

<template>
  <div>
    <h1>About Page</h1>
    <p>{{$route.path}}</p>
    <router-link to="/">Go to Home Page</router-link>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

以上代码中，我们使用了$route.path来获取当前路径信息。

通过以上示例，我们已经了解了使用Vue Router的基本方法。在实际开发中，需要根据具体情况进行调整和修改。