• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > vue有关路由跳转,初始路由设置

vue有关路由跳转,初始路由设置

作者:aeoliancrazy的博客 字体:[增加 减小] 来源:互联网 时间:2017-09-05

本文主要包含vue,vue-js,html等相关知识,aeoliancrazy的博客希望在学习及工作中可以帮助到您

vue默认路由(初始路由)更改

在router文件夹中的index.js文件中(前提你在生成的时候有这个文件和文件夹)

在配置路由的时候添加

 {path: '/', redirect: '/home'},

   |            |          | 
   v            v          v
  路径    重定向(路径) 具体路径

通过上述,修改了默认路由的

初始路由的 # 去除方法,就是参照某些demo地址栏会出现*的问题

在输出路由的时候添加

mode: 'history',

但是注意了,在npm run build之前要注释掉这一句,这句话会导致dist文件夹中的index页面的一些问题。

在在router文件夹中的index.js文件输出路由时

export default new Router({
  mode: 'history',
  routes: [
   {path: '/', redirect: '/home'},//定义的初始路由路径
    login,
    home,
    detail
  ]
})

相关路径和目录层级,根据自己的情况配置

在重定向后,页面加载时,或是路由改变时渲染

用watch监听路由改变时,调用函数

watch: {
      $route: 'handleWatchRoute(函数名)'
    }

在学习笔记6中有相关提及到

建议用路由监听比较好,随路由改变进而渲染比较符合逻辑

vue的路由似乎要监听

react的路由相关,是通过data,带参数,数据传递过来,自带监听

表单相关问题

在vue中,建议先屏蔽form的默认事件

参见官方文档,

<!-- 提交事件不再重载页面 --><!--并执行onSubmit方法,代替默认的submit-->
<form v-on:submit.prevent="onSubmit"></form>

解决submit的时候页面刷新卡顿问题,直接不进行页面刷新,而是转而用路由的跳转

与往常一样不在form标签里面用action属性

在方法onSubmit中定义路由的跳转

export default {
  methods: {
    onSubmit: function () {
      this.$goRoute('/home')
    }
  }
}

备注,jquery中有类似的onsubmit方法

您可能想查找下面的文章:

  • Vue.js前后端同构方案之准备篇——代码优化
  • Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
  • 如何在vue中引入第三方jquery,swiper等库(一)
  • VUE axios 实现自定义下载功能
  • vuejs怎么在服务器上发布部署
  • Vue 实现登录拦截(二)
  • vue打包项目后正确显示图片
  • Vue cli 引入第三方JS和CSS的常用方法
  • vue有关路由跳转,初始路由设置
  • vue-source的实例

相关文章

  • 2017-05-30Vue动态实现评分效果
  • 2017-05-30Vue表单验证插件Vue Validator使用方法详解
  • 2017-05-30谈谈因Vue.js引发关于getter和setter的思考
  • 2017-05-30vue2.0开发实践总结之疑难篇
  • 2017-05-30Vue.js第一天学习笔记(数据的双向绑定、常用指令)
  • 2017-05-30Vue 单文件中的数据传递示例
  • 2017-05-30Vue.js实现简单动态数据处理
  • 2017-05-30vue-router跳转页面的方法
  • 2017-05-30使用Vue.js创建一个时间跟踪的单页应用
  • 2017-05-30Vue.js实现多条件筛选、搜索、排序及分页的表格功能

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Vue.js第四天学习笔记(组件)
    • Vue 单文件中的数据传递示例
    • Vue声明式渲染详解
    • vue.js中Vue-router 2.0基础实践教程
    • 基于vuejs实现一个todolist项目
    • 前端 Vue.js 和 MVVM 详细介绍
    • VUE多层路由嵌套实现代码
    • Vue常用指令V-model用法
    • Vue2.0组件间数据传递示例
    • Vue.js每天必学之过渡与动画

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有