vue学习笔记7——有关路由跳转,初始路由设置
来源:互联网 发布:镇远古镇住宿知乎 编辑:程序博客网 时间:2024/06/07 16:03
vue学习笔记7——有关路由跳转等对自己的详解
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方法
阅读全文
3 0
- vue学习笔记7——有关路由跳转,初始路由设置
- vue学习笔记4——route,路由跳转等
- vue router学习——动态路由和嵌套路由
- VueJs路由跳转——vue-router的使用
- vue二级路由设置
- Vue学习笔记之 路由路径
- Vue---路由跳转和嵌套
- vue路由跳转传参数
- vue 路由跳转 + 过渡效果
- Vue路由笔记
- 【21】vue.js — 路由
- laravel 学习笔记——路由(路由与控制器)
- laravel 学习笔记——路由(路由与控制器)
- Laravel 学习笔记——路由(路由与控制器)
- vue路由学习
- vue学习-路由
- vue学习笔记3——外部引入css和路由的一部分
- vue学习笔记5——路由相关配置,引入其他插件等
- jq 实现CheckBox全选
- MySQL中key关键字的转义
- 有关指针变量的类型及含有义
- Android Stuido 沉浸式
- rpc error: code = 13 desc = invalid header field value "oci runtime error: exec failed: container错误
- vue学习笔记7——有关路由跳转,初始路由设置
- 【玩转云存储】对象存储OSS使用方法入门
- IPython使用学习笔记
- Android两个项目整合成一个
- Java中如何将一个数组反向输出
- 安卓测试工程师monkey的基本使用----小白版(一)
- ssm搭建超详细可运行(IntelliJ IDEA + maven + Spring + SpringMVC + MyBatis)
- activeMQ 传递数据,只能用基本类型,只有几种,其他的要序列化
- 文章标题