vue 组件和路由 cdn引入方式的写法

梦里梦外; 2023-10-11 16:48 19阅读 0赞

组件component的写法有全局写法和局部写法，全局写法在所有vue实例中都可用，局部写在一个vue实例里面

全局写法：

<root></root>  
Vue.component('root',\{template:'<div>全局全局</div>'\})  
这样我们就把就定义了一歌全局组件,root,直接使用<root>标签调用，就把组件中的template模板内容渲染到<root></root>标签里了！

局部写法：

<root></root>  
var vm=new Vue(\{  
el:'实例名',  
components:\{  
root:\{template:'<div>局部局部</div>'\}  
\}  
  
\})  
有时候我们不想用脚手架，用cdn引入方式路由怎么写呢？

首先引入JS

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>  
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>  
然后html页面

<div id="app">  
  
<router-link to="/foo">Go to Foo</router-link>  
<router-link to="/bar">Go to Bar</router-link>  
  
  
  
<router-view></router-view>  
</div>  
然后js页面

const app = new Vue(\{  
el:"\#app",  
router:new VueRouter(\{  
routes:\[  
\{path:'/foo',component:\{template:"<div>foo</div>"\}\},  
\{path:'/bar',component:\{template:"<div>bar</div>"\}\}  
\]  
\})  
\})  
在vue实例中定义router属性，属性的值是new VueRouter(), new VueRouter(\{\})的参数是对象，里面有个routers属性，routers属性是一个数组，数组中的每一个都是对象，对象中有path属性指定路径，component和路径绑定的组件，组件中有template模板属性！

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue篇】详解router路由 | element-ui组件 | 嵌套路由

Vue Router是Vue.js官方提供的用于构建单页应用（SPA）的路由管理器。它能够集中处理应用程序中的路由跳转、参数传递、页面切换等功能，使得开发者可以轻松地实现...

Dear 丶/ 2024年04月17日 06:39/ 0 赞/ 29 阅读

相关 vue 组件和路由 cdn引入方式的写法

组件component的写法有全局写法和局部写法，全局写法在所有vue实例中都可用，局部写在一个vue实例里面全局写法： <root></root> Vue.comp

梦里梦外;/ 2023年10月11日 16:48/ 0 赞/ 20 阅读

相关 Vue路由中引入组件Component的三种方式

一普通引入方式 import 组件名 from ‘组件路径’ 如 import login from ‘@/components/login’ 优

待我称王封你为后i/ 2023年01月13日 01:47/ 0 赞/ 93 阅读

相关 vue-router中引入vue组件的两种方式

前提在vue的路由配置文件(routers.js)中，有如下两种引入组件的方式： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shado

小灰灰/ 2022年12月09日 15:00/ 0 赞/ 363 阅读

相关 Vue---Vue路由传参(动态路由方式、query方式、params方式)

动态路由传参路由配置： { path: '/update/:uid/:name', //uid参数、name参数 name: '

蔚落/ 2022年12月01日 11:58/ 0 赞/ 196 阅读

相关 VUE_vue动态路由，引入所有路由，vue路由模块化

require.context 主要使用require.context实现前端工程化动他引入文件 require.context(directory, useSubdir

蔚落/ 2022年11月04日 00:52/ 0 赞/ 241 阅读

相关 Vue组件分离写法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

落日映苍穹つ/ 2022年10月29日 06:28/ 0 赞/ 145 阅读

相关 VUE_vue cdn引用使用router路由

[官方文档][Link 1] ![在这里插入图片描述][20210524114250577.png] <!DOCTYPE html> <html lang

心已赠人/ 2022年10月15日 07:59/ 0 赞/ 235 阅读

相关 vue引入echart组件

vue引入echart组件本文主要参考： http://blog.csdn.net/u013069892/article/details/70256596 h

偏执的太偏执、/ 2022年06月06日 12:35/ 0 赞/ 246 阅读

相关 vue组件及路由

Vue.js 组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的

女爷i/ 2021年10月20日 01:31/ 0 赞/ 325 阅读