纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html
尽量把纷繁的知识,肢解重组成为可以堆砌的知识。
我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。
==========================
经过几天的学习,组件的应用已入门。
组件的内容还有很多:
1、组件内部各类对象 ( $root $parent )、依赖注入、事件监听、循环引用、控制更新等。
2、组件的混入、自定义指令、渲染函数与JSX、插件、过滤器。
这些内容,将来进行大型学习类应用开发时,进行深入介绍。
为了能够尽快的应用 vue,下面进入路由的学习。
在前面的章节中,已接触过路由的相关代码。我把路由分为两部分:路由的定义,路由的应用。
路由的定义
在 router.js 中有如下代码:
Vue.use(Router) export default new Router({
routes: [
{ path: '/', name: 'home', component: Home },
{ path: '/form', name: 'forms', component: Forms },
{ path: '/about', name: 'about',
component: () => import( './views/About.vue')
}
]
})
上述代码是路由的定义,红色是路由的引入 ( 必须的过程 )。然后便是定义路由路径 path 与对应的组件 component。
路由的应用
在 main.js 中有如下代码,便是引入定义好的路由
import router from './router'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
那么在模板中,便可以使用这些路由:
<router-link to="/">主页</router-link>
<router-link to="/form">表单</router-link>
<router-link to="/about">VUE</router-link> <router-view/>
纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )的更多相关文章
- 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.6 - 组件的复用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.1 - 组件 ( component )
vue3.0 CLI 真小白入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study ...
随机推荐
- 电子技术经典资料汇总:PCB设计篇
电子技术经典资料汇总:PCB设计篇,下面的链接是一个一个的文件下载的,也是压缩包的内容,只不过我把他们给汇总成了一个压缩包,方便大家下载,还有更多电子技术必备基础资料,通信无线类的,C语言篇的,关于电 ...
- HTML和CSS使用注意事项
HTML 1.button标签 在IE中,button标签默认的type是button,而在其他浏览器和W3C标准中button默认的属性都是submit. 所以,在一个form表单中,如果butto ...
- 如何使用spring配合mybatis配置多个数据源并应用?
使用多数据源的场景应该是很多的,如操作同一台服务器上不同的数据库,或者多地机器上的相同或不相同数据库. 虽然涉及到不同数据库时,我们也许可以通过跨库操作的方式,如 other.user 使用同一数据源 ...
- odoo开发笔记 -- 多对多字段追加数据
正常赋值操作: (以某个模型对象的附件为例) , , attach_ids)] 其中,attach_ids为附件对象id列表. 追加更新操作: 直接追加方式,没有找到;间接实现,每次更新前,去查询附件 ...
- OkHttp3 简述
- (转)深度学习目标检测指标mAP
深度学习目标检测指标mAP https://github.com/rafaelpadilla/Object-Detection-Metrics 参考上面github链接中的readme,有详细描述
- 面试:C++实现访问者模式
参考:深入应用C++11,访问者模式 #include <iostream> class ConcreteElement1; class ConcreteElement2; class V ...
- leetcode — two-sum-iii-data-structure-design
import java.util.HashMap; import java.util.Map; /** * Source : https://oj.leetcode.com/problems/two- ...
- Asp.net mvc 5 CRUD代码自动生成工具- vs.net 2013 Saffolding功能扩展
Asp.net mvc 5 CRUD代码自动生成工具 -Visual Studio.net2013 Saffolding功能扩展 上次做过一个<Asp.net webform scaffoldi ...
- Everything(一款用于检索硬盘文件的工具)
有时候文件夹一多,找不到文件,忘记放哪个盘符怎么办? Everything就能帮你解决,比电脑自带的快多啦,官网在此:http://www.voidtools.com/ (也不大,就几M,没有特别的安 ...