（二十三）VueCli3.0全栈——设置首页和个人信息

1、首页

(1)client/src/views里面新建Home.vue

(2)给Home.vue设置路径

• 引入 import Home from './views/Home'

  在client/src/router.js里面

• 配置

  在组件index下面配置子组件，因为是index的子组件

  {
        path:'/index',
        name:'index',
        component:Index,
        children:[
          {path:'',component:Home},
          {path:'/home',name:'home',component:Home}
        ]
      }
  

(3)client/src/views/index.vue里面引入并使用

其中：就是使用的Home.vue模块

效果图：

首页效果图

2、个人信息

• 设置路径 (client/src/router.js中)

  import InfoShow from "./views/InfoShow" {path:'/infoshow',name:'infoshow',component:InfoShow}

• client/src/views下新建 InfoShow.vue文件

• client/public/index.html中引入样式，因为上面的InfoShow.vue组件用到了

• 修改跳转到个人信息的代码

  打开client/src/components/HeadNav.vue，修改方法中的跳转

  showInfoList(){
            // console.log("个人信息");
            this.$router.push("/infoshow");
        }
  

• 效果图

个人信息效果图