【vue 3.0 中使用vue-router详细步骤】

cv全粘工程师2023-08-25 17:57

Vue 3.0 中使用 vue-router 的步骤如下：

- - [1. 安装 vue-router：](#1. 安装 vue-router：)
  - [2. 创建一个单独的文件：](#2. 创建一个单独的文件：)
  - [3.main.js 配置路由：](#3.main.js 配置路由：)
  - [4. 在 App.vue 中使用 `<router-view>` 组件：](#4. 在 App.vue 中使用 <router-view> 组件：)
  - [5. 在路由的组件中使用 `<router-link>` 组件进行导航：](#5. 在路由的组件中使用 <router-link> 组件进行导航：)
  - 6.使用push进行跳转

1. 安装 vue-router：

bash 复制代码

npm install vue-router@4.0.0-beta.8

2. 创建一个单独的文件：

javascript 复制代码

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

3.main.js 配置路由：

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

4. 在 App.vue 中使用 `<router-view>` 组件：

js 复制代码

<template>
  <div>
    <h1>App.vue</h1>
    <router-view />
  </div>
</template>

5. 在路由的组件中使用 `<router-link>` 组件进行导航：

js 复制代码

<template>
  <div>
    <h2>About.vue</h2>
    <router-link to="/">Go to Home</router-link>
  </div>
</template>

6.使用push进行跳转

js 复制代码

<template>
  <div>
    <button @click="godetalis">跳转</button>
  </div>
</template>
  
  <script>
 import { useRouter } from "vue-router"; //引入路由

export default {
  setup() {
     const $route = useRouter();
    function godetalis() {
      $route.push({name: "你的路由名称"});
    }

    return {
      godetalis
    };
  }
};
</script>

以上就是在 Vue 3.0 中使用 vue-router 的详细步骤。

【vue 3.0 中使用vue-router详细步骤】

Vue 3.0 中使用 vue-router 的步骤如下：

1. 安装 vue-router：

2. 创建一个单独的文件：

3.main.js 配置路由：

4. 在 App.vue 中使用 <router-view> 组件：

5. 在路由的组件中使用 <router-link> 组件进行导航：

6.使用push进行跳转

4. 在 App.vue 中使用 `<router-view>` 组件：

5. 在路由的组件中使用 `<router-link>` 组件进行导航：