路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path:'/',
component:()=>import('../components/Home/Home.vue')
},
{
path:'/category/:id',
props:true,
component:()=>import('../components/Blogs/BlogList.vue')
},
{
path:'/category/:id/:bid',
props:true,
component:()=>import('../components/Blogs/BlogContent.vue')
},
]
const router = new VueRouter({
routes
})
export default router
Main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//导入Swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
APP.vue
<template>
<div id="app">
<div class="title">KGC技术博客</div>
<router-view/>
</div>
</template>
<style lang="scss">
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
outline: none;
}
.flex {
display: flex;
}
.j-c {
justify-content: center;
}
.j-s {
justify-content: space-between;
}
.a-c {
align-items: center;
}
.title{
height: 50px;
background: #f8f8f8;
color: #555;
line-height: 50px;
}
</style>
store index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
category: [
{
id: 0, category: "HTML", url: "/category/0", blogs: [
{
id: 0,
title: "HTML5新增标签",
content: "HTML5新增标签——内容"
},
{
id: 1,
title: "HTML基础语法",
content: "HTML基础语法——内容"
}
]
},
{
id: 1, category: "CSS", url: "/category/1", blogs: [
&nb