vue升级之路之vue-router的使用教程


Posted in Javascript onAugust 14, 2018

使用 Vue 构建的项目,一个页面是由多个组件构成的,而且经常是做成单页面应用,所以在跳转页面的时候,传统的 href 已经跟不上时代的步伐了,于是 vue-router 应运而生

在使用 vue-router 的时候,需要看看自己是否装了这个依赖,没有的话可以使用 npm install vue-router -S ,不过现在构建vue项目时有可以选择是否安装 vue-router,大家注意一下就行了

一、路由的配置

自动安装的vue-router,会在src 文件夹下有个一个 router -> index.js 文件 在 index.js 中创建 routers 对象,引入所需的组件并配置路径

vue升级之路之vue-router的使用教程 

在创建的 routers 对象中, path 配置了路由的路径,component 配置了映射的组件

然后在main.js里面引入router文件

vue升级之路之vue-router的使用教程 

在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头。

添加 mode: 'history' 之后将使用 HTML5 history 模式,该模式下没有 # 前缀,而且可以使用 pushState 和 replaceState 来管理记录。

关于 HTML5 history 模式的更多内容,可以自行度娘

二、嵌套路由

在构建的vue实例中,为了加深项目层级,App.vue 只是作为一个存放组件的容器

vue升级之路之vue-router的使用教程 

其中 是用来渲染通过路由映射过来的组件,当路径更改时, 中的内容也会发生更改

上面已经配置了两个路由,当打开 http://localhost:8080 或者 http://localhost:8080/index的时候,就会在 中渲染 index.vue 组件 index.vue 是真正的父组件,其它的子组件都会渲染到 index.vue 中的

vue升级之路之vue-router的使用教程 

想要在一级路由中实现嵌套二级路由,就要修改 router -> index.js

vue升级之路之vue-router的使用教程 

在配置的路由后面,添加 children,并在 children 中添加二级路由,就能实现路由嵌套。 配置 path 的时候,以 " / " 开头的嵌套路径会被当作根路径,所以子路由的 path 需不需要添加 " / " 就要看个人需求了

三、使用 映射路由

如果只需要跳转页面,不需要添加验证方法的情况,可以使用 来实现导航的功能:

<router-link class="item" to="/index/login" >{{ text }}</router-link>
 <router-link class="item" :to="{path:url, query:data}" >{{ text }}</router-link>

在编译之后, 会被渲染为 标签, to 会被渲染为 href,当 被点击的时候,url 会发生相应的改变

如果使用 v-bind 指令,还可以在 to 后面接变量,配合 v-for 指令可以渲染路由菜单

如果需要传入不同参数 ,可以在路由中添加动态参数,给 to 传入一个对象

{
 path: item.url,
 query: { id: '007' }
}

然后还可以使用 $ route.query.id 来获取到对应的参数

四、编程式导航

然而在实际项目下,有很多链接在执行跳转之前,还会执行方法对数据进行处理,这时可以使用 this.$router.push(location) 来修改 url 完成跳转

// 绑定goLogin
<button class="login" @click="goLogin"></button>
// 定义goLogin
methods: {
    goLogin() {
      this.routes.push('/login')
    }
  },

push 后面可以是对象,也可以是字符串:

// 字符串
this.$router.push('/index')
// 对象
this.$router.push({ path: '/index' })
// 命名的路由
this.$router.push({ name: 'login', params: { userId: '123' }})
Javascript 相关文章推荐
JavaScript 获取事件对象的注意点
Jul 29 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
layui table 参数设置方法
Aug 14 #Javascript
layui 表格的属性的显示转换方法
Aug 14 #Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 #Javascript
layui实现table加载的示例代码
Aug 14 #Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 #Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 #Javascript
layer插件select选中默认值的方法
Aug 14 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
PHP中常用数组处理方法实例分析
2008/08/30 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
初识JQuery 实例一(first)
2011/03/16 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
投标单位介绍信
2014/01/09 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
会计学专业自荐信
2014/06/25 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
关于运动会的广播稿
2015/08/19 职场文书
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers