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实现计算代码行数的简单方法附代码
Aug 13 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
php操作SVN版本服务器类代码
2011/11/27 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
php对称加密算法示例
2014/05/07 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
php简单压缩css样式示例
2016/09/22 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
JavaScript DOM基础
2015/04/13 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
jQuery.each使用详解
2015/07/07 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
沈阳故宫导游词
2015/01/31 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS