Vue3 实现路由vue-router效果

最新推荐文章于 2024-06-20 14:08:31 发布

-念

最新推荐文章于 2024-06-20 14:08:31 发布

阅读量1k

点赞数 2

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_53721052/article/details/127845986

版权

Vue3 实现路由vue-router效果

一、创建项目(这里创建名字为test的vue3文件)
二、下面正式进入vue-router + vue3 的使用
4.main.js
5.App.vue 中的使用
6.页面展示

一、创建项目(这里创建名字为test的vue3文件)

1.打开cmd，跳转到任意一个文件夹（最好新建一个存放项目）

在这里插入图片描述

2.输入以下代码创建名字为test的项目

vue create test

3.选择vue3 回车（Enter）

在这里插入图片描述

4.等待中…（再次回车下Enter）

在这里插入图片描述

5.出现如下的界面，则创建成功

在这里插入图片描述

6.（根据蓝色字的提示）在终端中输入cd test、npm run serve

在这里插入图片描述

7.复制蓝色的字体（二选一），粘贴到浏览器上

在这里插入图片描述

8.出现如下界面，则创建成功

在这里插入图片描述

查看下面的文章，根据 3.常见设置 配置项目的文件
在这里插入图片描述

二、下面正式进入vue-router + vue3 的使用

1.src下创建router文件夹，在router中创建index.js文件

在这里插入图片描述

2.创建路由组件

按照下面的结构创建pages文件夹
在pages文件夹里面分别创建Home和User文件夹
分别在这两个文件夹下面创建index.vue文件
在这里插入图片描述
在Home路由组件index.vue下

<template>
  <div class="">
Home
  </div>
</template>

<script>
export default {
   
  name: '',
  props: {
   },
  data () {
   
    return {
   }
  },
  components: {
   
    
  },
  computed: {
   
    
  },
  mounted: {
   
    
  },
  watch: {
   
    
  },
  methods: {
   
    
  },
  created () {
   
    
  },