vue3.0 CLI - 3.2 路由的初级使用教程


Posted in Javascript onSeptember 20, 2018

我的 github 地址 -vue3.0Study - 阶段学习成果都会建立分支。

==========================

动态路由

在路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由导航,并不是  /user/id/ 而是 /user/666/。

显然这个 id 能被获取,在组件中使用。通过 this.$route.params 获取。 this 是当前组件,$route 是路由对象,params 是一个对象字面量 { id:666 }。

$route 通过 Vue.use(Router) new Vue({ router, store, render: h => h(App) }).$mount('#app') 全局依赖注入,在所有组件中都可以使用它。

1、router.js 中 path: '/about' 路由 改为 path: '/about/:id'。

2、About.vue 中 <top-nav title="军事" :class="{ active: isActive }"/> 添加红色部分。

3、About.vue 中 data 或者 computed 属性中添加 isActive: function () { return this.$route.params.id === "666"; }

4、App.vue 中 <router-link to="/about/666">VUE</router-link>

5、About.vue 中 <style lang="less"> .active { background: red; } </style>

保存点击【VUE】导航按钮,即可见到效果:

vue3.0 CLI - 3.2 路由的初级使用教程

如何取得 $route 中参数的值,便是很大的进步。这个参数可以用在任何地方,可以用来做任何事情。

比如传递数据,根据路由参数动态从服务器获取组件内容等

在进行下一个内容学习之前,commit 一下。

嵌套路由(子路由)

在页面,通常存在多级导航。vue 官方网站便是多级导航的例子:顶部为一级导航栏,左侧为二级导航栏。

导航通常对应 <router-link> 而 <router-link> 与 <router-view/> 对应。

并非只有 App.vue 中才能存在 <router-view/>, 任何组件都可以。

下面把 HelloWorld.vue 变为 About.vue 的子路由:

1、<HelloWorld msg="vue 官方相关资料的链接"/> 替换为  <router-view/>

2、router.js 中关于 About.vue 组件的路由 替换为

{
  path: '/about/:id',
  name: 'about',
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
  children: [
  {
   path: '1',
   component: HelloWorld,
   props: (router) => ({
   msg: router.query.msg
   })
  }
  ]
 }

在浏览器地址栏输入 http://localhost:8081/#/about/666/1?msg='welcome to nDos blog' 查看效果。

编程式导航与路由命名

在 vue 初始化的工程中,路由配置时,组件都已做好命名。这便是路由命名。

编程式导航,尽量使用命名的路由,如下:

router.push({ name: 'about', params: { userId: 123 }})

因为使用 path 属性进行编程式导航,params 无效。

这样使用路由跳转,使得单页面编程的路由跳转更加灵活。比如某个跳转按钮,可以绑定函数,进行条件跳转。

关于这两个的内容并不多,参照官网教程学习。

命名视图

在一个组件中,如果有多个组件出口,比如:在某个页面,需要同时展示很多个组件时。

只有一个 <router-view/> 显然不能满足需求。

多个 <router-view/> 同时存在的时候,就必须要加以区分,用的是 name 属性:<router-view name="a"/>

在 router.js 中的 components 属性中,添加多个组件即可 ( 到这里才明白为什么 components 为什么是复数形式的写法  )。

总结

以上所述是小编给大家介绍的vue3.0 CLI - 3.2 路由的初级使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
微信小程序使用gitee进行版本管理
Sep 20 #Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 #jQuery
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 #Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 #jQuery
Vuex 快速入门(简单易懂)
Sep 20 #Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 #Javascript
js计算两个日期间的天数月的实例代码
Sep 20 #Javascript
You might like
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
js模块加载方式浅析
2017/08/12 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
Vue多系统切换实现方案
2018/06/05 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
Python深入学习之对象的属性
2014/08/31 Python
python 列表降维的实例讲解
2018/06/28 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
Python argparse模块使用方法解析
2020/02/20 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
opencv实现图像平移效果
2021/03/24 Python
舞蹈教育学专业推荐信
2013/11/27 职场文书
新学期决心书
2014/03/11 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
体育教师研修感悟
2015/11/18 职场文书
小学班级标语口号大全
2015/12/26 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫