Vue基础知识-（临时记录）组件与路由的快速使用以及格式报错问题

本文最后更新于：December 3, 2021 pm

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

组件

分为两步：

  1. 导入组件。
  2. 注册组件。又分为全局注册和局部注册。

自定义组件 myFirst.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--自定义组件-->
<template>
  <div>
    <h2>LoongOne</h2> 
  </div>
</template>

<script> 
</script>

<style>
</style>

1.导入

APP.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
//导入
import mfirst from './components/myFirst.vue'
</script>

<style>
</style>

2.注册

2.1 全局注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <first></first>  <!--自定义组件使用位置-->
  </div>
</template>

<script>
import mfirst from './components/myFirst.vue' //导入组件
// 全局注册
import Vue from 'vue'
Vue.component('first',mfirst) //注意使用名称和导入名称的位置

export default {
  name: 'App',
}
</script>

<style>

</style>

2.2 局部注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <first></first> <!--自定义组件使用位置-->
  </div>
</template>

<script>
import mfirst from './components/myFirst.vue' //导入组件
//局部注册
export default {
  name: 'App',
  components:{
    first: mfirst //注意名称的位置;key-value形式，当两者相同时，可写为一个
  }
}
</script>

<style>

</style>

路由

1.步骤

  1. 在main.js中导入注册路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' //导入

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, //注册
  components: { App },
  template: '<App/>'
})

  1. 写组件 Myrouter.vue
1
2
3
4
5
6
7
8
9
10
<template>
  <h3>router</h3>
</template>

<script>
</script>

<style>
</style>

  1. 在router文件夹下的index.js中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Myrouter from '@/components/Myrouter'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/', //路径
      name: 'HelloWorld',
      component: HelloWorld //组件名
    },
    {
      path: '/Myrouter', //路径
      name: 'Myrouter',
      component: Myrouter //组件名
    }
  ]
})

  1. 在App.vue中使用
1
2
3
4
5
6
7
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>  <!--路由使用-->
    <first></first>
  </div>
</template>

2.重定向

可以指定进入的默认页面和在访问没有定义的页面链接时跳转到的页面。

2.1 进入的默认页面设置

router/index.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Myrouter from '@/components/Myrouter'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/', //刚进入的路径
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Myrouter',
      name: 'Myrouter',
      component: Myrouter
    }
  ]
})

2.2 非法路径访问页面设置（不建议）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Myrouter from '@/components/Myrouter'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Myrouter',
      name: 'Myrouter',
      component: Myrouter
    },
    {
      path: '*', //当前面所有的都不匹配时执行
      name: 'HelloWorld2',
      component: Myrouter //自定义更改组件
    }
  ]
})

我也不知道，上面的这种方法在具体实际开发中能不能用，反正我现在自己学习的时候是可以实现效果的。和下面的重定向效果一样（也可能不一样，我也不知道。反正就自己试。）。

2.3 重定向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Myrouter from '@/components/Myrouter'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Myrouter',
      name: 'Myrouter',
      component: Myrouter
    },
    {
      path: '*',
      redirect: '/Myrouter' //当不满足前面的要求时，重定向到其他的
    }
  ]
})

格式报错问题

在写博文的时候，发现一个问题。项目能跑起来，但每次都报一个错：

1
2
3
4
5
6
Errors:
  1  http://eslint.org/docs/rules/spaced-comment

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

然后就慢慢调，结果发现，这是因为格式不规范的问题。。。比如下面的这几种。

1.空格问题

1
2
//全局注册 # 报错
// 全局注册 # 不报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--报错-->
<script>
import mfirst from './components/myFirst.vue'

export default {
  name: 'App',
  components:{ //空格问题，name属性同理
    first: mfirst
  }
}
</script>


<!--不报错-->
<script>
import mfirst from './components/myFirst.vue'

export default {
  name: 'App',
  components: {  //空格问题，name属性同理
    first: mfirst
  }
}
</script>

2.空行问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 报错
<script>
import mfirst from './components/myFirst.vue'
# 第1行
# 第2行
export default {
  name: 'App',
  components: {
    first: mfirst
  }
}
</script>



# 不报错
<script>
import mfirst from './components/myFirst.vue'
# 第1行
export default {
  name: 'App',
  components: {
    first: mfirst
  }
}
</script>

也就是说，只能空一行，不能空多的。。。

3.解决办法

加上：

1
/* eslint-disable */

加上后，不再报错。还有一点需要注意的是，这句代码放的位置，是放在第一次有报错情况的语句前面。如果放在报错情况语句的后面，则前面的报错情况不能解决。使用如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
/* eslint-disable */
import mfirst from './components/myFirst.vue'

 //问题1之处
//全局注册 //问题2之处
// import Vue from 'vue'
// Vue.component('first',mfirst)

export default {
  name: 'App',
  components:{ //问题3之处
    first: mfirst
  }
}
</script>
Vue
Vue

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/1926506160.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！