脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3使用路由VueRouter4

Vue3使用路由VueRouter4的简单示例

 更新时间：2021年07月15日 10:17:08   作者：Drk  
在vue.js项目中使用vue-router，可以使用路由进行界面或路径跳转,下面这篇文章主要给大家介绍了关于Vue3使用路由VueRouter4的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

路由

vue-router4保持了大部分API不变，我们只关注变化部分即可。

安装

yarn add vue-router@4

引入

cdn

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.cjs.js"></script>

使用

router.js

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

import Home from "./views/Home.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: () => import("./views/About.vue") }
];

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

export default router;

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");

App.vue

<template>
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>
</template>

<script>
export default {};
</script>

一个小提示

如果你的 App.vue 模板只有 <router-view></router-view> 时， 可以吧 <router-view> 直接放入 index.html 中。

例如：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" rel="external nofollow"  />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

之后 main.js 内移除 App.vue

main.js

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

// const app = createApp(App);
const app = createApp({});
app.use(router);
app.mount("#app");

完成！😀方便又好用

总结

到此这篇关于Vue3使用路由VueRouter4的文章就介绍到这了,更多相关Vue3使用路由VueRouter4内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vite中自制mock服务器(不使用第三方服务)

    Vite中自制mock服务器(不使用第三方服务)

    本文主要介绍了Vite中自制mock服务器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Vue.js中extend选项和delimiters选项的比较

    Vue.js中extend选项和delimiters选项的比较

    这篇文章主要介绍了Vue.js中extend选项和delimiters选项的比较的相关资料,需要的朋友可以参考下
    2017-07-07
  • vue中的.sync修饰符用法及原理分析

    vue中的.sync修饰符用法及原理分析

    这篇文章主要介绍了vue中的.sync修饰符用法及原理分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue使用v-model封装el-pagination组件的全过程

    Vue使用v-model封装el-pagination组件的全过程

    通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了，但看了一圈，总是不如意，于是决定还是自己动手搞一个，对v-model封装el-pagination组件相关知识感兴趣的朋友一起看看吧
    2021-07-07
  • vue2.0+vuex+localStorage代办事项应用实现详解

    vue2.0+vuex+localStorage代办事项应用实现详解

    本篇文章给大家分享了一个用vue2.0+vuex+localStorage代办事项应用实现的代码过程，有兴趣的朋友跟着参考学习下。
    2018-05-05
  • vue3中覆盖组件样式的方法小结

    vue3中覆盖组件样式的方法小结

    在 Vue 3 中,覆盖组件样式的方法与 Vue 2 相似,但由于 Vue 3 更多地依赖于 CSS 的模块化,一些最佳实践可能会有所不同,下面就跟随小编一起来了解一下吧
    2024-04-04
  • vue3.x lodash在项目中管理封装指令的优雅使用

    vue3.x lodash在项目中管理封装指令的优雅使用

    这篇文章主要为大家介绍了vue3.x lodash在项目中管理封装指令的优雅使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Vue.js实现tab切换效果

    Vue.js实现tab切换效果

    这篇文章主要为大家详细介绍了Vue.js实现tab切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    这篇文章主要介绍了从零搭建一个vite+vue3+ts规范基础项目,本项目已vite开始，所以按照vite官方的命令开始，对vite+vue3+ts项目搭建过程感兴趣的朋友一起看看吧
    2022-05-05
  • 详解vue 自定义marquee无缝滚动组件

    详解vue 自定义marquee无缝滚动组件

    这篇文章主要介绍了vue自定义marquee无缝滚动组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论