1. 安装 vue-router：
npm install vue-router@4.0.0-beta.8
2. 创建一个单独的文件：
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 配置路由：
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> 组件：
<template>
<div>
<h1>App.vue</h1>
<router-view />
</div>
</template>
5. 在路由的组件中使用 <router-link> 组件进行导航：
<template>
<div>
<h2>About.vue</h2>
<router-link to="/">Go to Home</router-link>
</div>
</template>
6.使用push进行跳转
<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 的详细步骤。文章来源地址https://www.toymoban.com/news/detail-671430.html
文章来源：https://www.toymoban.com/news/detail-671430.html
到了这里，关于【vue 3.0 中使用vue-router详细步骤】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
