vue之组件

最新推荐文章于 2024-05-21 10:17:20 发布

原创最新推荐文章于 2024-05-21 10:17:20 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍Vue.js中组件的概念、定义及使用方法，并详细解析了如何配置基本路由，包括路由组件与非路由组件的区别、路由重定向等关键知识点。

非路由组件：components
路由组件：views/pages

vue的结构

<template>
    <div>

    </div>
</template>

<script>
    export default {}
</script>

<style>

</style>

main.js

/*
入口js：创建Vue实例
 */
import Vue from 'vue'
import App from './App.vue'
// import router from "./router";

Vue.config.productionTip = false

new Vue({
    // router,
    render: h => h(App),
}).$momainunt('#app')

配置路由信息

import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "./components/HelloWorld";
import MyTest from "./components/MyTest"

Vue.use(Router);

export default new Router({
    mode: "history",
    // base: process.env.BASE_URL,
    routes: [{
        path: "/HelloWorld",
        name: "/HelloWorld",
        component: HelloWorld
    },
        {
            path: "/MyTest",
            name:"/MyTest",
            component:MyTest
        },
        //配置路由重定向  //当用户输入的内容不再是路由表时  执行默认路由
        {
            path: "*",
            redirect: "/HelloWorld"
        }
    ]
});

引入组件

    import Add from './components/Add.vue'
    import List from './components/List.vue'

App.vue

<template>
  <div id="app">
<!--      <img class="logo" src="./assets/logo.png" alt="log">-->
<!--      3.使用组件标签-->
      <Test></Test>
    <img alt="Vue logo" src="./assets/logo.png">
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
<!--    <router-view></router-view>-->
  </div>
</template>

<script>
    //1.引入组件
    import Test from './components/Test.vue'

    // import HelloWorld from './components/HelloWorld.vue'

export default {
    //2.映射组件标签
    components:{
        Test
    }



  // name: 'App',
  // components: {
  //   HelloWorld
  // }
}
</script>

<style>
    .logo{
        width: 300px;
        height: 300px;
    }


</style>

什么是组件，怎么定义，怎么引入，怎么使用，他们之间如何交互、基本路由使用