/**1.封装组件 局部 封装**/
// 1.创建组件构造器对象
const cpnC = Vue.extend({
template: `
});
//2.注册组件
Vue.component('my-cpn',cpnC);
2.全局封装
const app2 = new Vue({
el: '#app2',
components: {
// cpn使用组件时的标签名
mycpn: cpnC
}
})
语法糖的方式:
/****2 vuecli 封装组件****/
APP.vue 文件
我是APP组件
首页
关于
用户
档案
import HomeNews from "./components/HomeNews";
import Home from "./components/Home";
export default {
name: 'App',
components: {Home, HomeNews},
data() {
return {
userId: 'zhangsan',
imgURL: 'http://www.baidu.com/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
}
})
}
}
}
/*.router-link-active {*/
/*color: #f00;*/
/*}*/
.active {
color: #f00;
}
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('http://httpbin.org/', {
// firstName: 'Fred',
// lastName: 'Flintstone'
// })
// .then(function (response) {
// console.log(response);
// })
// .catch(function (error) {
// console.log(error);
// });
axios.get('/http://httpbin.org/', {
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
我是首页
我是首页内容, 哈哈哈
新闻
消息
{{message}}
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()
}
}
可以引入公共样式
@import "./assets/css/base.css";