脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue完整版和runtime版的区别详解

    Vue完整版和runtime版的区别详解

    这篇文章主要为大家介绍了Vue完整版和runtime版的区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • vue 代码压缩优化方式

    vue 代码压缩优化方式

    这篇文章主要介绍了vue 代码压缩优化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • Vue组件之Tooltip的示例代码

    Vue组件之Tooltip的示例代码

    这篇文章主要介绍了Vue组件之Tooltip的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 详解Vue文档中几个易忽视部分的剖析

    详解Vue文档中几个易忽视部分的剖析

    针对Vue文档中部分大家可能不会去研读的内容，这篇文章主要介绍了详解Vue文档中几个易忽视部分的剖析，非常具有实用价值，需要的朋友可以参考下
    2018-03-03
  • postcss-pxtorem设置不转换UI框架的CSS单位问题

    postcss-pxtorem设置不转换UI框架的CSS单位问题

    这篇文章主要介绍了postcss-pxtorem设置不转换UI框架的CSS单位问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue element 表头添加斜线的实现代码

    vue element 表头添加斜线的实现代码

    这篇文章主要介绍了vue element 表头添加斜线的实现代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-11-11
  • Element控件Tree实现数据树形结构的示例代码

    Element控件Tree实现数据树形结构的示例代码

    我们在开发中肯定会遇到用树形展示数据的需求,本文主要介绍了Element控件Tree实现数据树形结构的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • vue之数据交互实例代码

    vue之数据交互实例代码

    本篇文章主要介绍了vue之数据交互实例代码，vue中也存在像ajax和jsonp的数据交互，实现向服务器获取数据，有兴趣的可以了解一下
    2017-06-06
  • Vue使用el-input自动获取焦点和二次获取焦点问题及解决

    Vue使用el-input自动获取焦点和二次获取焦点问题及解决

    这篇文章主要介绍了Vue使用el-input自动获取焦点和二次获取焦点问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • 为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

    为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

    这篇文章主要介绍了为什么Vue3.0使用Proxy实现数据监听？defineProperty表示不背这个锅，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论