Vue组件的创建和引入

Vue组件的创建和引入

1.组件的创建

在/src/components文件夹创建一个新组件noveltyCenterIndex.vue

<template>
    <div>
        <el-tag>标签一</el-tag>
        <el-tag type="success">标签二</el-tag>
        <el-tag type="info">标签三</el-tag>
        <el-tag type="warning">标签四</el-tag>
        <el-tag type="danger">标签五</el-tag>
    </div>
</template>

2.组件的引入

在使用组件的页面设置组件名，引入组件

import noveltyCenterIndex from '../../components/noveltyCenterIndex.vue'

在导出模块中增加组件

export default {
  components:{
    noveltyCenterIndex
  }
}

使用引入的组件

<template>
    <noveltyCenterIndex></noveltyCenterIndex>
</template>

element-ui按需引入

在/src/plugins/elements.js中引入

import Vue from 'vue'
import {
    Button,
} from 'element-ui'

Vue.use(Button);

路由跳转的三种方式

方式一：router-link跳转

1. 不带参数
 
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name  
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。

2.带参数
 
<router-link :to="{name:'home', params: {id:1}}">  
 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id
 
 
<router-link :to="{name:'home', query: {id:1}}"> 
 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
 
// html 取参  $route.query.id
// script 取参  this.$route.query.id