vue3中在本地注册组件+router的简单使用

【本地注册组件】

(1)在components文件夹中创建组件，名称为XxxYyy.vue的形式。组件是一个单独的vue文件。有template,script，style

(2)注册组件

登录后复制

<template>
  <组件名/>
</template>

<script setup>
  import 组件名 from '@/components/....vue'
</script>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

这样就可以在另一个页面中使用组件。

【router的简单使用】

（1）在view文件夹下写一个XXXview.vue文件

（2）在router下的index.js的routes中添加该页面的路径，格式像样例一样。

样例：在地址栏输入.../demo/跳转到ViewDemo页面

登录后复制

import { createRouter, createWebHistory } from 'vue-router'
import ViewDemo from "@/views/ViewDemo"

const routes = [
  {
    path: "/demo/",
    name: "demo",
    component:ViewDemo,
  },
]

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

export default router

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.

原创作者: u_16969274 转载于: https://blog.51cto.com/u_16969274/11821399