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代码要注意的几条规则
Sep 10 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
微信小程序使用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截取发动短信内容的方法
2017/07/04 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
python双向链表实现实例代码
2013/11/21 Python
Python base64编码解码实例
2015/06/21 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
python动态进度条的实现代码
2019/07/03 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
后勤人员自我鉴定
2013/10/20 职场文书
班级入场式解说词
2014/02/01 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
个人简历求职信范文
2015/03/20 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
python中如何对多变量连续赋值
2021/06/03 Python