Vue-小技巧

文章内容总结:

路由上默认的 `#/：`

问题：解除路由上默认的 #/ 。

场景:

// 去掉路由中自带的 #/ 这种东西
  mode: 'history',

需要注意的是使用了 history 之后需要在服务器部署时增加一些配置，具体方法插件下面官方写的配置方法

路由懒加载写法:

    // 我所采用的方法，个人感觉比较简洁一些，少了一步引入赋值。
    const router = new VueRouter({
      routes: [
        path: '/app',
        component: () => import('./app'),  // 引入组件
      ]
    })
    // Vue路由文档的写法:
    const app = () => import('./app.vue') // 引入组件
    const router = new VueRouter({
      routes: [
        { path: '/app', component: app }
      ]
    })

文档的写法在于问题在于：如果我们的路由比较多的话，是不是要在路由上方引入赋值十几行组件？

第一种跟第二种方法相比就是把引入赋值的一步，直接写在component上面，本质上是一样的。两种方式都可以的，大家自由选择哈。

路由的项目启动页和404页面

实际上这也就是一个设置而已:

扫描二维码关注公众号，回复： 5744239 查看本文章

    export default new Router({
      routes: [
        {
          path: '/', // 项目启动页
          redirect:'/login'  // 重定向到下方声明的路由 
        },
        {
          path: '*', // 404 页面 
          component: () => import('./notFind') // 或者使用component也可以的
        },
      ]
    })

DOM 事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

文章内容总结:

路由上默认的 #/：

路由懒加载写法:

路由的项目启动页和404页面

DOM 事件修饰符

猜你喜欢

路由上默认的 `#/：`