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 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
React中的refs的使用教程
Feb 13 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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中异常处理方法小结
2015/01/09 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
Python中subprocess模块用法实例详解
2015/05/20 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
基于python plotly交互式图表大全
2019/12/07 Python
Pyqt5自适应布局实例
2019/12/13 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
python 实现任务管理清单案例
2020/04/25 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
工程造价与管理专业应届生求职信
2013/11/23 职场文书
房地产开盘策划方案
2014/02/10 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
中考标语大全
2014/06/05 职场文书
2014年库房工作总结
2014/11/26 职场文书
安全责任书
2015/01/29 职场文书
新郎结婚保证书
2015/02/26 职场文书
应急管理工作总结2015
2015/05/04 职场文书
MySQL数据库简介与基本操作
2022/05/30 MySQL