非路由组件: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>
什么是组件,怎么定义,怎么引入,怎么使用,他们之间如何交互、基本路由使用