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

 

4.组件部分 components

（1）Nav.vue

（2）Footer.vue

（3）Home.vue  首页

（4）Follow.vue  关注页

（5）Column.vue  栏目页

（6）UserInfo.vue  我的页

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