2-pdd项目主面板搭建

主面板搭建

配置路由入口文件index.js

在项目目录下的src文件夹下的router文件夹下新建路由入口文件index.js

src\ router\ index.js

index.js

index.js 路由入口文件

// 配置完成路由后,  会自动增加了两个属性供访问使用: $router 、$route

//1：引入相应的模块
import Vue from 'vue'
import VueRouter from 'vue-router'

//引入主面板一级路由
import Home from './../pages/Home/Home'
import Recommend from './../pages/Recommend/Recommend'

//引入首页二级路由
import Hot from '../pages/Home/Children/Hot/Hot'
import Dress from "../pages/Home/Children/Dress"

//2：声明使用vue-router
Vue.use(VueRouter);

//3：输出路由对象
export default new VueRouter({
    routes: [
        //3.1：配置主面板一级路由
        {
            path: '/home',
            component: Home,
            //3.2：配置首页二级路由
            children: [
                {path: '/hot',component: Hot},
                {path: '/dress',component: Dress},
                //设置首页刷新自动跳转到的二级页面
                {path: '/home',redirect:'/home/hot'}
            ]
        },
        {
            path:'/recommend',
            component: Recomment
        },
        //设置首页刷新自动跳转到的一级页面
        {
            path: '/',
            redirect:'/home'
        }
    ]
})

---

在项目入口文件main.js引入路由

在项目文件下的src文件夹下的项目入口文件main.js中使用路由

src\main.js （项目入口文件）

main.js

main.js 项目入口文件

//引入相应的模块
import Vue from 'vue'
import App from './App'

//引入路由模块
import router from './router/index'

new Vue({
  el: '#app',
  //配置路由
  router,
  render: h => h(App)
})

1. 配置完成路由后, 会增加了几个组件 <router-link></router-link> 、<router-view></router-view>、<keep-alive></keep-alive>

2：配置完成路由后, 增加了两个属性供访问使用: $router、$route

---

在App.vue中进行组件化

在项目文件夹下的src文件夹下的App.vue文件中进行组件化开发

src\App.vue （应用组件文件）

App.vue

App.js 应用组件文件

<template>
  <div id="app" >
    <!--路由组件-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
#app
  width 100%
  height 100%
  background-color #f5f5f5

</style>

项目源码地址

https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd