/**1.封装组件 局部 封装**/
// 1.创建组件构造器对象
const cpnC =Vue.extend({
template: `
<div>
</div>`
})；
//2.注册组件
ponent('my-cpn',cpnC);
//3.使用组件
<my-cpn></my-cpn>
2.全局封装
const app2 = new Vue({
el: '#app2',
components: {
// cpn使用组件时的标签名
mycpn: cpnC
}
})
语法糖的方式：
/****2 vuecli 封装组件****/
APP.vue 文件
<template>
<div id="app">
<h2>我是APP组件</h2>
<!--<router-link to="/home" tag="button" replace active-class="active">首页</router-link>-->
<!--<router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->
<!--<router-link to="/home" tag="button" replace>首页</router-link>-->
<!--<router-link to="/about" tag="button" replace>关于</router-link>-->
<!--<button @click="homeClick">首页</button>-->
<!--<button @click="aboutClick">关于</button>-->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-link :to="'/user/'+userId">用户</router-link>
<!--<!–<router-link to="/profile">档案</router-link>–>-->
<router-link :to="{path: '/profile', query: {name: 'why', age: 18, height: 1.88}}">
档案</router-link>
<!-- <button @click="userClick">用户</button>
<button @click="profileClick">档案</button> -->
<keep-alive exclude="Profile,User">
<router-view/>
</keep-alive>
</div>
</template>
<script>
import HomeNews from "./components/HomeNews";
import Home from "./components/Home";
export default {
name: 'App',
components: {Home, HomeNews},
data() {
return {
userId: 'zhangsan',
imgURL: '/logo.png'
}
},
methods: {
homeClick() {
// 通过代码的方式修改路由 vue-router
// push => pushState
// this.$router.push('/home')
this.$router.replace('/home')
console.log('homeClick');
},
aboutClick() {
// this.$router.push('/about')
this.$router.replace('/about')
console.log('aboutClick');
},
userClick() {
this.$router.push('/user/' + this.userId)
},
profileClick() {
this.$router.push({
path: '/profile',
query: {
name: 'kobe',
age: 19,
height: 1.87
}
})
}
}
}
</script>
<style>
/*.router-link-active {*/
/*color: #f00;*/
/*}*/
.active {
color: #f00;
}
</style>
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'serveies'
Vue.config.productionTip = false
// prototype.name = "coderwhy"
new Vue({
el: '#app',
router,
render: h => h(App)
})
// axios.post('/', {
// firstName: 'Fred',
// lastName: 'Flintstone'
// })
// .then(function (response) {
// console.log(response);
// })
// .catch(function (error) {
// console.log(error);
// });
axios.get('//', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
router / index.js
// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')
// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)
// 2.创建VueRouter对象
const routes = [
{
path: '',
// redirect重定向
redirect: '/home'
},
{
path: '/home',
component: Home,
meta: {
title: '首页'
},
children: [
// {
// path: '',
// redirect: 'news'
// },
{
path: 'news',
component: HomeNews
},
{
path: 'message',
component: HomeMessage
}
]
},
{
path: '/about',
component: About,
meta: {
title: '关于'
},
beforeEnter: (to, from, next) => {
console.log('about beforeEnter');
next()
}
},
{
path: '/user/:id',
component: User,
meta: {
title: '用户'
},
},
{
path: '/profile',
component: Profile,
meta: {
title: '档案'
}
}
]
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes,
mode: 'history',
linkActiveClass: 'active'
})
// 前置守卫(guard)
router.beforeEach((to, from, next) => {
// 从from跳转到to
document.title = to.matched[0].meta.title
// console.log(to);
// console.log('++++');
next()
})
// 后置钩子(hook)
router.afterEach((to, from) => {
// console.log('----');
})
// 3.将router对象传入到Vue实例
export default router
components/home.vue
<template>
<div>
<h2>我是首页</h2>
<p>我是首页内容, 哈哈哈</p>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>
<h2>{{message}}</h2>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
message: '你好啊',
path: '/home/news'
}
},
created() {
console.log('home created');
},
destroyed() {
console.log('home destroyed');
},
// 这两个函数, 只有该组件被保持了状态使用了keep-alive时, 才是有效的
activated() {
this.$router.push(this.path);
console.log('activated');
},
deactivated() {
console.log('deactivated');
},
beforeRouteLeave (to, from, next) {
console.log(this.$route.path);
this.path = this.$route.path;
next()
}
}
</script>
<style scoped>
</style>
<style>
可以引入公共样式
@import "./assets/css/base.css";
</style>
