vue学习笔记7——有关路由跳转，初始路由设置

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方法