vue中路由组件和非路由组件

最新推荐文章于 2023-05-29 23:16:22 发布

_处女座程序员的日常

最新推荐文章于 2023-05-29 23:16:22 发布

阅读量626

点赞数

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

本文链接：https://blog.csdn.net/qq_42931285/article/details/126696534

版权

前端同时被 2 个专栏收录

367 篇文章 12 订阅

订阅专栏

vue

210 篇文章 4 订阅

订阅专栏

本文介绍了Vue.js中路由组件与非路由组件的主要区别。路由组件通常位于pages或views目录下，需在router配置中注册，而非路由组件常置于components目录，以标签形式直接引用。两者都具备$route和$router属性，前者用于获取和操作路由信息，后者用于编程式导航。了解这些区别有助于更好地组织和管理Vue应用的组件结构。

摘要由CSDN通过智能技术生成

书写位置：
一、路由组件与非路由组件的区别?
1、路由组件一般放置在pages或views文件夹。非路由组件一般放置components文件夹中。
2、路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字)，非路由组件在使用的时候，一般都是以标签的形式使用
3、注册完路由，不管是路由组件、还是非路由组件身上都有$route 、 $router属性。

    $route:一般获取路由信息 路径、query、params等等
    $router:一般进行编程式导航进行路由跳转push replace

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_处女座程序员的日常

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中路由组件和非路由组件

路由组件和非路由组件
复制链接

扫一扫

专栏目录

vue中路由vue-router的使用和生命周期

01-06

Vue Router 是vue.js官方的路由管理器。它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。 vue-router的使用 1.在项目src文件夹下新建名为router的文件夹 2.在router文件夹下新建index.js 编程式 router...

Vue初体验之Vue的组件和路由

qq_45117205的博客

08-29

929

Vue的组件、路由和生命周期

参与评论您还未登录，请先登录后发表或查看评论

Vue组件和路由

Jinx_baobao的博客

03-25

3240

目录一、父组件传值子组件 1、接受父组件传值 2、设置传递类型 3、data和props的区别二、子组件传值父组件 1、子组件调用父组件的方法三、ref的使用 1、获取dom节点 2、获取组件四、Vue中路由的使用 1、什么是路由 2、如何使用路由 3、路由的跳转 1.声明式跳转 2.函数式跳转四、路由重定向五、选中路由高亮六、组件的嵌套七、命名视图八、计算属性和监听器 watch用法： Computed用法属性计算不能和data里面.

Vue.js第三篇：组件和路由

weixin_52499276的博客

11-18

1859

一、组件(最基本的能力) 1、vue组件的定义在页面引入的组件同时也是Vue的实例（如：<mycom1></mycom1>）什么是模块化：模块化从代码角度出发，分析项目，把项目中功能类似的代码抽离为一个个小的模块，为了以相同的方式去封装模块，于是就创造了模块化的规范（CommonJS规范）优点：方便项目的开发，方便后期的维护和扩展，提高开发效率什么是组件化：从UI的角度出发，把页面上有重用性的UI结构和样式，单独抽离出来，封装为一个单独的组件（封装的是HTML元素），每个

vue非路由组件使用

weixin_52113974的博客

09-11

298

非路由组件如果使用

【springboot+vue前后端分离的项目（七）】实现网页（非路由组件）跳转

最新发布

shanglin1122的博客

05-29

1498

在 Vuex 中定义状态管理模块，以便能够在不同组件之间共享数据、方便管理数据状态和简化开发。

Spring Boot/VUE中路由传递参数的实现代码

11-30

在开发Web应用时，路由参数的传递是必不可少的环节，特别是在使用现代前端框架如Vue.js和后端微服务框架如Spring Boot的情况下。本篇将详细阐述这两种技术如何处理路由参数的传递。首先，我们来看看Spring Boot...

vue实现路由懒加载及组件懒加载的方式

12-12

一、为什么要使用路由懒加载 ...1、未用懒加载，vue中路由代码如下　　import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Ro

vue中路由跳转不计入history的操作

10-14

最后，文档中还提到了使用`<van-field>`组件的例子，这实际上是Vant UI组件库中的表单输入组件，虽然这个组件与路由跳转无直接关系，但它体现了在Vue项目中集成UI组件库的做法。在实际开发中，利用如Vant这样的组件...

vue中路由参数传递可能会遇到的坑

11-28

vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转本文主要给大家介绍了关于vue路由参数传递遇到的一些坑，分享出来供大家参考学习，下面话不多说了，来一起...

Vue路由非路由组件的使用

qq_42919799的博客

09-18

978

借鉴文章：路由组件的使用自己整理非路由组件使用定义定义在 components文件夹中 -----components(里面的内容都是公共的) 注册注册在 App.vue 使用在App 中书写组件标签路由组件的使用定义定义在pages中 -------pages(是自定义的一个文件夹用于保存路由组件) 注册路由器相关配置 1.安装路由 npm i vue-router -S 2.引入并声明使用路由插件 3.向外暴露一个路由器的对象

vue-router 在非路由组件中获取不到完整route，router

海胆的博客

10-09

694

可通过BOM获取地址栏信息。

路由组件与非路由组件的区别

qq_52006379的博客

10-28

367

【代码】路由组件与非路由组件的区别。

vue3.2 电商前台项目（二）—— 路由组件和非路由组件

ailsa_csdn的博客

03-14

2644

vue 3.2 版的电商前台项目（二）：路由组件和非路由组件介绍与搭建

Vue组件分类、路由的跳转

Sparks550的博客

12-29

498

路由组件和非路由组件的区别路由组件文件一般放在view|page文件夹呢；非路由组件一般放在components。路由组件需要在router文件夹中注册（使用的即为组件的名称），非路由组件在使用的时候，一般都是以标签的形式使用。路由的跳转路由跳转有两种形式声明式导航router-link，可以进行路由的跳转编程式导航push|replace,可以进行路由的跳转说明：声明式导航能做的，编程式导航都能做；但是编程式导航除了可以进行路由跳转还可以做一下其他的业务逻辑. //声明式导航:仅进行

Vue2电商前台项目（一）：项目前的初始化及搭建

weixin_42044763的博客

09-07

4282

文件夹：放置项目的依赖public文件夹：一般放置的是静态资源（图片），需要注意：放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中，不会当做一个模块打包到 JS 里面src文件夹 —assets文件夹：一般放置的是静态资源（一般放置多个组件公用的的静态资源），需要注意：放置在assets文件夹里面的资源，webpack打包的时候，会把静态资源当做一个模块，打包到JS文件里面 —components文件夹：一般放置的是非路由组件（全局组件）

单文件组件与Vue中的路由

zl13015214442的博客

02-25

621

1. 单文件组件打开src目录下的main.js文件，整个项目的入口文件。main.js中的挂载点“#app”就是指的index.html中的ID等于app的div元素。其中的指的是在项目里用了一个局部组件App(后一个)，在外层的Vue实例中给这个组件也取名为App。ES6写法中如果键和值是一样的可以直接写成：在模板里把App这个组件渲染出来，显示在页面上。引入局部组件。以vu...

Vue-Router模式、钩子

weixin_30362083的博客

07-17

155

上一篇主要写了一下vuer-router的基本使用，可以说解决温饱了，下面就再来点下午茶吧模式 vue-router中的模式选项主要在router实例化的时候进行定义的，如下 const router = new VueRouter({ 　　　mode: 'history', // 两种类型history 还有 hash routes: routes // 可以...

Vue路由组件

weixin_43807712的博客

12-09

2083

1.创建路由组件路由组件一般与非路由组件区分，非路由组件放在component下，路由组件在src目录下新建一个文件夹views/pages存放。 2.路由组件配置在src文件夹下新建router文件夹在其中建立index.js编写路由文件配置，配置代码如下： // 配置路由的地方 import Vue from 'vue'; import VueRouter from 'vue-router'; //使用插件 Vue.use(VueRouter) //引入路由组件 import Home f

vue中路由组件与一般组件的区别

03-29

Vue中的路由组件与一般组件的区别在于它们的使用方式和作用范围。一般组件是在应用程序中被重复使用的组件，可以通过`<component>`标签或者其他方式在多个页面中使用。一般组件没有固定的URL地址，也不会在浏览器的地址栏中显示。而路由组件则是用于具有固定URL地址的页面的组件，它们可以通过Vue Router来管理和渲染。路由组件通常与特定的URL地址相关联，并且可以在浏览器的地址栏中显示。路由组件可以通过Vue Router的路由配置文件来注册和使用。因此，路由组件和一般组件的主要区别在于它们的作用范围和使用方式。路由组件用于管理和渲染具有固定URL地址的页面，而一般组件则用于在应用程序中重复使用的组件。