05、Vue-页面骨架《饿了吗》

一、组件拆分

在App.vue这个大组件中，添加小的组件，按页面模块划分，也就是头部header、导航nav、主体内容content，可以添加简单的样式，查看页面元素时会发现，有些样式根本没有添加的，这也就是vue-loader的帮我们搞定css兼容问题；

二、vue-router路由

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

功能实现: 导航中有商品、评论、商家在点击时，主体内容会发生改变，这就是可以通过vue-router来实现；

  // HTML ==> App.vue组件
  <!-- 导航-->
  <div class="nav">
    <div class="nav-item">
         <!-- 使用 router-link 组件来导航. -->
         <!-- 通过传入 `to` 属性指定链接. -->
         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
         <router-link to="/goods">商品</router-link>
     </div>
     <div class="nav-item">
         <router-link to="/ratings">评论</router-link>
     </div>
     <div class="nav-item">
         <router-link to="/seller">商家</router-link>
     </div>
</div>

  <!-- 主体内容-->
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view> </router-view>

// 加载组件
Vue.use(VueRouter);

  // javascript ==> main.js
// 1\. 定义（路由）组件 (可以从其他文件 import 进来)
import Goods from './components/goods/Goods';
import Seller from './components/seller/Seller';
import Ratings from './components/ratings/Ratings';

  // 2\. 定义路由,每个路由应该映射一个组件
const routes = [
    // 设置打开浏览器就默认调整到 "商品"，所以需要把根路由/重定向到/goods
    {
        path: '/',
        redirect: '/goods'
    },
    {
        path: '/goods',
        component: Goods
    },
    {
        path: '/ratings',
        component: Seller
    },
    {
        path: '/seller',
        component: Ratings
    }
]

  // 3\. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
    routes, // （缩写）相当于 routes: routes
    linkActiveClass: 'active'    // 全局配置链接激活的类名
});

  // 4\. 创建和挂载根实例
// 要通过 router 配置参数注入路由，从而让整个应用都有路由功能
const app = new Vue({
        // el: '#app',
    template: '<App/>',
    components: {
        App
    },
    router  // 添加路由
}).$mount('#app');

导入模块路径设置
【webpack配置】每次导入模块都是相对路径，在模块不同路径就会不一样；为了方便操作，每次模块通过components/xxx/xxx导入，即是在webpack.base.conf.js中添加components字段并设置组件目录位置:

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // 路径的配置
      'components': resolve('src/components')
    }
  },

打开页面默认显示页面内容
打开页面时即是根路由/, 改变默认显示即将根路由/重定向到/goods

  // javascript ==> main.js
// 2\. 定义路由,每个路由应该映射一个组件。 
const routes = [
    // 根路由，重定向到对应路由中
    {
        path: '/',
        redirect: '/goods'
    },
    // 其他路由对应的组件
]

选中路由的样式调整
设置链接激活时使用的 CSS 类名，默认值可以通过路由的构造选项 linkActiveClass 来全局配置(默认值: router-link-active)

// javascript ==> main.js
// 3\. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
    // ......
    linkActiveClass: 'active'    // 全局配置链接激活的类名，之后再添加上该类名的样式即可
});

  // Nav.vue
  <style>
     .active{  // 链接激活的样式
        color: rgb(240, 20, 20);
    }
</style>

作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

05、Vue-页面骨架《饿了吗》

一、组件拆分

二、vue-router路由

推荐阅读更多精彩内容