KGC技术博客

本文详细介绍了Vue.js应用中如何配置VueRouter进行路由管理,包括基本路由、带参数的路由以及如何返回列表。同时,展示了如何在项目中引入Vuex进行状态管理,用于存储和共享应用程序的状态。通过示例代码,展示了Vuex的store模块结构以及在组件中获取和修改状态的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

路由配置

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值