vue创建组件并添加到路由

最新推荐文章于 2024-11-27 16:33:31 发布
最新推荐文章于 2024-11-27 16:33:31 发布
阅读量641 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： VUE Windows 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fittec/article/details/115439908
本文介绍了如何在Vue中创建组件，并将其添加到路由中。通过/say_hi路由，访问名为SayHi的组件。组件包含template（HTML元素）、script（脚本）和style（CSS样式）三部分。通过引入组件并在路由配置中分配，使用npm run dev启动项目后，可以在http://localhost:8080/#/say_hi查看效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

通过路由/say_hi访问组件

.vue组件由模板(template),脚本(script),样式(style)三部分组成

模板中存放HTML元素，样式标签下存放CSS样式 

import SayHi from '@/components/SayHi' 引入组件

下面代码为组件分配路由

 {
      path: '/say_hi',
      name: 'SayHi',
      component: SayHi
    }

在项目所在目录运行npm run dev 启动项目可访问路由 http://localhost:8080/#/say_hi 

 

Vue组件与路由
qq_45377275的博客
08-30 553
1 Vue组件 为什么要使用组件: 1 在传统的页面开发时,会将大量的HTML/CSS/JS进行引入,但引入后结构混乱 不便于开发,维护成本高,而Vue的组件化,将每一个组件看成一个页面,每一个组件中都会有自己的HTML/CSS/JS,可以引入到不同的页面,并且结构不会错乱 : 2 .前端框架为了更好的解耦,采用了"分治"思想的构建代码. 3 组件采用树形结构, 可以将功能小型化.单独维护. 4 组件是一个独立的个体,内部包含HTML/CSS/JS 组件就是一个小的页面 如何理解template
vue自定义组件与路由新手使用
qq_38735996的博客
01-17 2419
1。百度使用vue-cli创建一个模板项目 2.创建项目之后，目录如下： 3.项目目录： components存放自己定义的组件， 其中组件是以.vue结尾的文件 4.创建自定义组件，以header.vue为例 组件的格式均为如下格式，有template标签，script标签，style标签， template标签用来定义该组件在页面上现实的内容，script标签内容是该组件包含...
关于vue-router路由组件的搭建
最新发布
xiaolibujiangli的博客
11-27 323
区别:声明式导航能的编程式导航都能,但是,编程式导航可以进行一些业务逻辑(如:登入跳转时,先进行验证账号密码业务,成功后跳转)在main.js中引入这个路由(import router from './router'),并注册。3.在main.js中注册完路由,不管是路由组件还是非路由组件都有$route,&router属性。1.路由组件pages/views文件夹中,非路由组件在components文件夹中(一般情况)&router:一般进行编程式导航进行路由跳转[push,replace]
vue笔记（四）注册组件，路由，vuex
Start2019
11-14 1427
项目中的组件注册 全局 import Loading from '@/components/loading';//封装的loading组件 Vue.component('Loading',Loading); 局部 <loading/> important loading from './components/loading' components:{loading} ...
怎么新开一个组件并且配置路由?vue-cli
weixin_30608503的博客
05-21 262
首先要明白: 路由就是url路径,如果一个组件被引入到了另外一个组件，这个页面就包含这个组件了,所以这个被包含的组件不要去路由哪里配置了 第一步: 先写上想要添加的组件 2.组件的内容 3.路由的配置 ,index.js文件 4.在地址栏 转载于:https://www.cnblogs.com/antyhouse/p/9069473.html...
vue 解决addRoutes多次添加路由重复的操作
11-19
本文将深入探讨如何解决在Vue应用中使用`addRoutes`多次添加路由导致的重复问题。 首先，我们需要了解Vue Router的基本用法。Vue Router通过`import`引入并使用`Vue.use(Router)`注册到Vue实例中。创建一个路由器...
vue相同路由跳转强制刷新该路由组件操作
10-14
Vue Router默认情况下，如果路由路径保持不变，它不会重新创建或销毁组件。为了实现强制刷新，可以采用以下两种方法： 1. **添加动态查询参数** 可以在路由跳转时添加一个动态查询参数，如当前的时间戳或随机数。...
vue 路由子组件created和mounted不起作用的解决方法
10-16
通常，这些生命周期钩子在组件实例创建和挂载到DOM时会被调用，但当涉及到路由跳转和`keep-alive`缓存策略时，可能会出现异常行为。 `keep-alive`组件是Vue中用于缓存组件状态的一种机制，它使得在路由切换过程中，...
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
但是，在动态路由中使用import()函数加载模块时，可能会遇到“加载不到module”的问题，本文将针对此类问题展开讨论，并提供解决方案。 ### Vue动态路由与异步加载import组件 动态路由是指路由地址或参数在应用...
【vue】路由vue-router
@point
07-16 223
进阶小白对路由的理解
Vue组件，路由的使用
wgp's blog
08-02 471
Vue组件，路由的使用组件全局组件私有组件组件的切换路由 组件 如图，途中的页面上的每一个块结构都是一个组件，当页面模块不需要更换的为全局组件，需要更换来展示页面的叫私有组件 全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
Vue路由（router）的安装和使用
weixin_47957908的博客
10-31 3562
Vue路由（router）的安装和使用。
vue脚手架：路由的配置和使用
无面人的博客
05-16 1506
vue脚手架：路由的配置和使用
vue自动注册路由和自动全局注册组件
想吃凤梨酥的博客
08-16 1325
vue的自动路由和自动全局注册组件都是靠 require.context() 方法遍历某个文件夹获取文件路径为基础的
Vue初体验之Vue的组件和路由
qq_45117205的博客
08-29 1002
Vue的组件、路由和生命周期
Vue-day05
weixin_43996260的博客
03-25 962
一、 子组件传值父组件 子组件调用父组件的方法 在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的） 子组件可以触发这个事件$emit('事件名字',传递的参数) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
vue 动态添加组件_VUE 动态路由（二）
weixin_39639286的博客
11-23 1847
上一篇介绍了一种动态路由的方案，由前端写好路由表，然后通过登陆用户的角色来匹配出需要的路由。今天来研究下另外一种方案，后端返回路由表，然后生成导航菜单。先讲下场景，同样是做权限控制，要根据登陆者的角色，生成对应角色能访问的路由，并生成菜单，生成菜单可以直接遍历路由，这里不多讲。这种场景中，由后端根据登陆者的信息，返回对应的路由表，然后前端将路由表转换成正确...
vue中在组件中点击按钮动态添加子路由$addRoute
3木子熙H
08-05 3426
1.首先在按钮处添加事件且带有两个参数 参数一是item，参数二是子路由组件页面(也就是跳转后的页面) 2.在生命周期函数created()中添加路由 3.在方法中进行路由传值
vue--创建组件配置路由（二）
qq_40693615的博客
05-19 1275
有关于组件和路由： 组件是我们根据需求封装出来的HTML页面 路由是一个项目中的枢纽，调配我们创建的各个组件，让不同的页面可以进行切换 模块化组件 就是把多个功能拆分成一个一个的vue文件，让他们自己有一定的独立性 使用组件 -> 先注册组件 template -> 编写组件 组件模块化之后创建的组件都只需要挂载到App.vue中 我们要做的是在template标签集中编写文件。 在component/common 的文件夹下创建 Home.vue文件 写一下home.vue的页面
vue组件中如何添加路由
05-13
在 Vue 中添加路由需要使用 Vue Router。下面是一个简单的步骤： 1. 安装 Vue Router 可以使用 npm 或者 yarn 安装 Vue Router： ``` npm install vue-router --save ``` 或者 ``` yarn add vue-router ``` 2. 创建路由实例 在 Vue 组件中添加路由之前，我们需要创建一个路由实例： ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import About from '@/components/About' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] }) ``` 在上面的代码中，我们首先导入 Vue、Vue Router 以及我们定义的两个组件（Home 和 About）。然后，我们使用 Vue.use(Router) 安装 Vue Router 插件。最后，我们创建了一个路由实例并定义了两个路由（'/' 和 '/about'）以及它们对应的组件。 3. 在组件中使用路由 在组件中使用路由非常简单。我们只需要在模板中添加 <router-link> 标签，它会自动渲染成一个可以点击的链接。例如： ```html <template> <div> <h1>Home</h1> <router-link to="/about">About</router-link> </div> </template> ``` 上面的代码中，我们在 Home 组件中添加了一个 <router-link> 标签，它会渲染成一个可以点击的链接，并跳转到 '/about' 路径。 4. 在根组件中挂载路由 最后，在根组件中挂载路由即可： ```javascript import Vue from 'vue' import App from './App' import router from './router' new Vue({ el: '#app', router, render: h => h(App) }) ``` 在上面的代码中，我们导入了 App 组件和路由实例，并在根组件中挂载了路由。现在，我们就可以在 App 组件中使用 <router-view> 标签来渲染当前路由对应的组件了。 ```html <template> <div id="app"> <router-view></router-view> </div> </template> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

自由软件开发者

有你的鼓励，我会更加努力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值