vue2.0 仿手机新闻站（二）项目结构搭建 及 路由配置

1.项目结构

$ vue init webpack-simple news

$ npm install vuex vue-router axios style-loader css-loader -D

2.main.js

import Vue from 'vue'
import App from './App.vue'
// 引入 路由
import VueRouter from 'vue-router'
// 引入 路由配置文件
import routes from './router.config'

Vue.use(VueRouter);

// 创建 路由
const router = new VueRouter({
mode:'history', // 删除 url 中的'#'号
routes // routes 等价于 routes:routes
});

require('./assets/css/base.css'); // 全局引入

new Vue({
el: '#app',
router,
render: h => h(App)
})

3.入口文件 App.vue

<template>
<div id="app">
<NavView></NavView>
<router-view></router-view>
<FooterView></FooterView>
</div>
</template>

<script>
/**
* 引入 组件
*/
// 头部导航
import NavView from './components/Nav.vue'
// 中间内容
import HomeView from './components/Home.vue'
// 底部选项卡
import FooterView from './components/Footer.vue'

export default {
components:{
NavView,
FooterView
}
}
</script>

<style lang="scss">
@import './assets/css/index.css';
</style>

4.组件部分 components

（1）Nav.vue

<!-- 顶部选项卡 -->
<template>
<div id="nav">
<div class="nav">
<ul>
<router-link to="/home" tag="li" active-class="active">
<a href="javascript:;">首页</a>
</router-link>
<router-link to="/follow" tag="li" active-class="active">
<a href="javascript:;">关注</a>
</router-link>
<router-link to="/column" tag="li" active-class="active">
<a href="javascript:;">栏目</a>
</router-link>
</ul>
</div>
</div>
</template>

（2）Footer.vue

<!-- 底部选项卡 -->
<template>
<div class="foot-btn">
<ul>
<!--首页-->
<router-link class="home" to="/home" tag="li">
<a href="javascript:;"></a>
</router-link>
<!--关注-->
<router-link class="write" to="/follow" tag="li">
<a href="javascript:;"></a>
</router-link>
<!--我的-->
<router-link class="my" to="/user-info" tag="li">
<a href="javascript:;"></a>
</router-link>
</ul>
</div>
</template>

（3）Home.vue 首页

<!-- 首页 -->
<template>
<div id="home">
<div class="content mt30">首页部分</div>
</div>
</template>

<script>
export default{
}
</script>

<style scoped>
.mt30{
margin-top: 30px;
}
</style>

（4）Follow.vue 关注页

<!-- 关注页 -->
<template>
<div id="follow">
<div class="content mt30">关注部分</div>
</div>
</template>

<style scoped>
.mt30{
margin-top: 30px;
}
</style>

（5）Column.vue 栏目页

<!-- 栏目页 -->
<template>
<div id="column">
<div class="content mt30">栏目部分</div>
</div>
</template>

<style scoped>
.mt30{
margin-top: 30px;
}
</style>

（6）UserInfo.vue 我的页

<!-- 我的 -->
<template>
<div class="content">
<div class="header">
<h2><img src="../assets/img/headimg.png" alt=""/></h2>
<div class="user-box">
<router-link to="/user-login">登录</router-link>
<router-link to="/user-reg">注册</router-link>
</div>
<ul class="clear">
<li>
<span>0</span>
<p>关注</p>
</li>
<li>
<span>0</span>
<p class="end">粉丝</p>
</li>
</ul>
</div>
<div class="docList">
<ul>
<li class="gk-text">
<i></i>
<p>公开博文</p>
<b></b>
<span>0</span>
</li>
<li class="mm-text">
<i></i>
<p>秘密博文</p>
<b></b>
<span>0</span>
</li>
<li class="cg-text">
<i></i>
<p>草稿箱</p>
<b></b>
<span>0</span>
</li>
<li class="sc-text">
<i></i>
<p>收藏夹</p>
<b></b>
<span>0</span>
</li>
<li class="my_cz">
<i></i>
<p>收藏夹</p>
</li>
</ul>
</div>
</div>
</template>

<style scoped>
@import '../assets/css/mydoc.css';
</style>

5.路由配置文件 router.config.js

/**
* 配置 路由
*/
// 导入组件
import Home from './components/Home.vue'
import Follow from './components/Follow.vue'
import Column from './components/Column.vue'
import UserInfo from './components/UserInfo.vue'

// 导出路由数组
export default [
{ // 首页
path:'/home',
component:Home
},
{ // 关注页
path:'/follow',
component:Follow
},
{ // 栏目页
path:'/column',
component:Column
},
{ // 我的页
path:'/user-info',
component:UserInfo
},
{ // 配置默认路由
path:'/',
redirect:'/home' // 路由重定向
},
{
path:'*',
redirect:'/home' // 路由重定向
}
]

6.效果图