VUE 使用笔记

路由使用

配置路由：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

var router = new Router({
  // 路由规则
  routes: [
    {
      path: `/login`,
      component: resolve => {
        lazyLoading(resolve, 'system/Login')
      },
    },
    ...
    // 找不到路由的默认地址
    {
      path: '*',
      redirect: '/'
    }
  ]
})

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

// 懒加载组件
const lazyLoading = (resolve, name, index = false) => {
  require.ensure([], function(require) {
    resolve(require(`@/views/${name}${index ? '/Index' : ''}.vue`));
  })
}
复制代码

HTML中必须要有：（通常在App.vue中，依据项目而定）

<router-view></router-view>复制代码

HTML：

<router-link to="/home">Home</router-link>
<!-- 或 -->
<router-link :to="'/home'">Home</router-link>复制代码

JS：

this.$router.push(url)复制代码

不记录历史纪录：

this.$router.replace(url)复制代码

前进、后退：

// 后退
this.$router.go(-1)
// 前进
this.$router.go(1)复制代码

获取参数：

this.$route.params.参数名复制代码

如, 路由中设置的路径是： /list/:id，真实路径是 /list/3，这么写 this.$route.params.id

获取查询参数：

this.$route.query.xxx    //xxx:查询参数名复制代码

对于路径 /foo?user=1，则 this.$route.query.user 的值是 1。

获取路径：

this.$route.path复制代码

@click 绑定事件不生效

按照Vue文档，在组件上绑定原生点击事件请使用@click.native。

错误处理：

Custom elements in iteration require 'v-bind:key' directives

更改vetur配置 vscode->首选项->设置->搜索（vetur）"vetur.validation.template": true,改成：false

配置打包后路径

如果打包后css、js等文件的引入路径出现错误则需要查看vue.config.js中的publicPath的路径，一般情况下如果像打包生成的文件可以部署在任何路径下则publicPath='./'。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

...待续...

PS：本人文章只做个人笔记使用，不用点赞，不用收藏。内容可能来源网上搜索所得，也可能是自己使用心得记录。

转载于:https://juejin.im/post/5bfce4ca518825604c161668