vue 开发之路由配置方法详解


Posted in Javascript onDecember 02, 2019

本文实例讲述了vue 开发之路由配置方法。分享给大家供大家参考,具体如下:

概要

用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。

实现代码

1.在main.js 中引入 router.3

import router from './router/index'

2.在main.js 中使用router

global.globalVm = new Vue({
  el: '#app',
  router,
  render: function(h) {
    return h(App);
  },
  store,
  watch: {
    '$route' (to, from) {
      globalVm.$dialog.loading.close();
      curPath = to.name;
    }
  }
});

这里导入了 router 配置,页面使用这个路由进行页面切换。

3. 组件渲染的位置。

我们可以看到 App.vue 组件,页面组件渲染到 <router-view ></router-view>标签中。

<template>
 <div id="app">
   <transition :name='direction'>
      <keep-alive>
        <router-view :resize="Resize" v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition :name='direction'>
        <router-view :resize="Resize" v-if="!$route.meta.keepAlive"></router-view>
      </transition>
    <loading v-model="isLoading" String="加载中" ></loading>
 </div>
</template>

router-view 这个是vue 组件渲染的地方。

4.组件路由配置

vue 开发之路由配置方法详解

index.js 配置如下:

export default new Router({
 routes: [
  {
   path: '/login',
   name: 'login',
   component: Login,
   meta:{
     layer:0
   }
  },
    {
   path: '/',
   name: 'root',
   redirect:"/index",
   meta:{
     layer:1
   }
  },
  {
   path: '/myToDo',
   name: 'myToDo',
   component: resolve => require(['@/components/bpm/MyToDo'], resolve),
   meta:{
     layer:2
   }
  },
  {
   path: '/MyAttend',
   name: 'myAttend',
   component: resolve => require(['@/components/bpm/MyAttend'], resolve),
   meta:{
     layer:2
   }
  },
  {
   path: '/getInstInfo/:instId/:type',
   name: 'getInstInfo',
   component:resolve => require(['@/components/bpm/GetInstInfo'], resolve),
   mata:{
     layer:3
   }
  },

4.1 根组件的配置

{
   path: '/',
   name: 'root',
   redirect:"/index",
   meta:{
     layer:1
   }
  • path 是浏览器显示的路径。
  • name:是组件的命令,我们在流程跳转是,使用name 进行跳转,而不要使用路径跳转,因为 路径可以修改,只要name 不做修改,就可以正常工作。
  • redirect: 这里表示 直接跳转到 /index 组件。
  • meta :这个是可以扩展的属性,我们在这里扩展了一个layer属性。

这个属性是用来组件做切换使用的,通过这个layer 属性,我们可以决定组件的动画。

App.vue 文件

vue 开发之路由配置方法详解

4.2 登录组件的配置

import Login from '@/components/Login'

{
   path: '/login',
   name: 'login',
   component: Login,
   meta:{
     layer:0
   }
}

component: Login

引入组件,指定登录组件。

4.3 懒加载组件

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

{
   path: '/myToDo',
   name: 'myToDo',
   component: resolve => require(['@/components/bpm/MyToDo'], resolve),
   meta:{
     layer:2
   }
  }

component: resolve => require(['@/components/bpm/MyToDo'], resolve),

4.4 组件参数配置

{
   path: '/task/:taskId',
   name: 'task',
   component:resolve => require(['@/components/bpm/TaskDetail'], resolve),
   mata:{
     layer:3
   }
}

这里我们定义了一个 taskId 参数。

4.5 组件切换

1.页面中进行切换。

<rx-list-item 
          v-for="item in list" 
          :key="item.id" 
          :href="{name:'task',params:{taskId:item.id}}" rel="external nofollow" 
          type='link'
          class="item-a"
        >

这里我们可以看到 ,指定了组件的名称,还有参数配置。

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

2.编程方式进行切换。

我们在保存数据成功后,需要跳转到提示组件,我们可以使用一下代码。

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

4.6 路由HISTORY模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

url 路径样式为:

http://yoursite.com#/user/1

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
Javascript Global对象
Aug 13 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
详解JS模块导入导出
Dec 20 Javascript
webpack external模块的具体使用
Mar 10 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
vue 开发企业微信整合案例分析
Dec 02 #Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 #Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 #Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 #Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 #Javascript
angular异步验证防抖踩坑实录
Dec 01 #Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 #Javascript
You might like
生成卡号php代码
2008/04/09 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
社区优秀志愿者先进事迹
2014/05/09 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
领导欢迎词范文
2015/01/26 职场文书
党员个人总结自评
2015/02/14 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
社区结对共建协议书
2016/03/23 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android