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

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 [email protected]

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 的详细步骤。

相关推荐
京东零售技术5 分钟前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
前端·开源
前端大白话21 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys23 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话24 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村31 分钟前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg501735 分钟前
Vue回调函数中的this
前端·javascript·vue.js
程序猿大波36 分钟前
基于Java,SpringBoot,Vue,HTML宠物相亲配对婚恋系统设计
java·vue.js·spring boot
前端太佬37 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb20041 小时前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼1 小时前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html