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的默认事件

参见官方文档,


<form v-on:submit.prevent="onSubmit">form>

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

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

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

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

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

你可能感兴趣的:(Vue,vue,vue-js,html,前端)