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.效果图