vuejs2-2简单路由设置

1 根目录index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuejs2elm</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="static/css/reset.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2 src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import App from './App';
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';

import 'common/stylus/index.styl'

Vue.use(VueRouter); // 使用vue-router
Vue.use(VueResource); // 使用vue-resource

// 配置路由
const routes = [{
  path: '/',
  redirect: '/goods'
}, {
  path: '/goods',
  component: goods
}, {
  path: '/ratings',
  component: ratings
}, {
  path: '/seller',
  component: seller
}];

//
const router = new VueRouter({
  linkActiveClass: 'active', // 自定义路由切换类名为active
  routes
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
    // 此时可以不用传入template
    // => es6语法 --createElement
});

3 src/App.vue

<template>
  <div>
    <v-header></v-header>
    <!--路由切换区域-->
    <div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <!--路由内容区域-->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<!--
  'router-link'
      Vuejs2+版本写法 会被解析成<a></a>
      to="/xxx"指向的路由地址(src/main.js配置的路由一致)
  'keep-alive' 组件间切换时保存组件的信息到内存中，切换回来时仍然是之前的状态
  'router-view' 路由渲染视图
-->
<script>
  import header from 'components/header/header.vue'; // 引入header组件

  export default {
    components: { // 注册header组件
      'v-header': header
    }
  };
</script>

<style lang="stylus">
  @import "./common/stylus/mixin.styl"

  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    border-1px(rgba(7, 17, 27, 0.1))
  .tab-item
    flex: 1
    text-align: center
    & > a
      display: block
      font-size: 14px
      color: rgb(77, 85, 93)
      &.active
       color: rgb(240, 20, 20)
</style>

4 效果

 

posted @ 2017-04-13 10:55  Jesonhu  阅读(193)  评论(0)    收藏  举报
Top