Vue-小技巧

文章内容总结:

目录

路由上默认的 #/：

路由懒加载写法:

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

 DOM 事件修饰符

---

路由上默认的 #/：

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

场景:

// 去掉路由中自带的 #/ 这种东西
  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页面

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

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

---

 DOM 事件修饰符

...



...