Vite中如何使用vue-router4

最新推荐文章于 2024-08-04 00:49:34 发布

原创最新推荐文章于 2024-08-04 00:49:34 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了前端新手如何使用Vue.js和vue-router创建一个简单的导航应用。通过新建Vite项目，配置路由文件，以及创建和导入组件，实现了页面间的跳转。在main.js中引入router.js，并在App.vue中设置导航链接，最终展示了首页、产品和关于三个页面。文章适合Vue.js初学者参考。

前端小白，学习如何使用vue-router，这里记录和总结一下。

如何使用vite新建一个项目，这个根据官方的文档来就可以了。基本就是用如下的命令新建一个项目

npm create vite@latest my-vue-app -- --template vue

这样我们有了一个my-vue-app的项目了，目录结构就不说了，基本是根目录下有一个index.html，使用了src/main.js，我们就在main.js中添加一个router的js文件，然后就可以使用了。main.js使用了App.vue组件，我们就是在这个组件中写导航的内容

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>

<template>
  <nav>
    <router-link to="/home">首页</router-link>
    <router-link to="/product">产品</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <br />
  <br />
  <!-- 此处为组件显示容器 -->
  <router-view></router-view>
</template>

这里我们有了链接，但是还没有写router文件。在src目录下新建一个router目录，在router目录下，新建一个文件router.js，内容如下：

import {createRouter,createWebHashHistory} from 'vue-router';

const routes = [
	{path:'/home',component:()=>import("../components/Home.vue")},
	{path:'/about',component:()=>import("../components/about.vue")},
	{path:'/product',component:()=>import("../components/product.vue")},
];

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

export default router;

这样我们就能看到App渲染出来的界面如下

这样我们点击首页、产品、关于都会跳转到相应的内容。而components目录下的三个文件Home.vue. About.vue. Product.vue文件的内容都比较简单，如下

<template>
	<div>this is home page</div>
</template>

整体使用的还是比较简单，如果没有经验的话，可能不知道如何配置。