vue学习二：用 Vue.js + Vue Router 创建单页应用的几个步骤

├── App.vue ????????????????????????// APP入口文件├── api ????????????????????????????// 接口调用工具文件夹│ ??└── index.js ???????????????????// 接口调用工具├── components ?????????????????????// 组件文件夹，目前为空├── config ?????????????????????????// 项目配置文件夹│ ??└── index.js ???????????????????// 项目配置文件├── main.js ????????????????????????// 项目配置文件├── page ???????????????????????????????// 我们的页面组件文件夹│ ??├── homePage.vue ????????????// 首页，其他页面的入口页面│ ??└── listPage.vue ??????????????????// 列表页，包含栏目列表和栏目对应的媒资内容│ ??└── detailPage.vue ??????????????????// 媒资详情页│ ??└── searchPage.vue ??????????????????// 搜索页├── router ?????????????????????????// 路由配置文件夹│ ??└── index.js ???????????????????// 路由配置文件├── style ??????????????????????????// ?样式存放目录│ ??└── style.scss ?????????????// 主样式文件└── utils ??????????????????????????// 常用工具文件夹 ???└── index.js ???????????????????// 常用工具文件

<template lang="html"> ?<div id="home_page">首页</div></template><script> ???export default{}</script><style lang="css"></style>

<div id="app"> ?<!-- 路由出口 --> ?<!-- 路由匹配到的组件将渲染在这里 --> ?<router-view></router-view></div>

import Vue from ‘vue‘import Router from ‘vue-router‘

//导入页面,@写法了解
import homePage from ‘@/page/homePage‘import listPage from ‘@/page/listPage‘import detailPage from ‘@/page/detailPage‘import searchPage from ‘@/page/searchPage‘Vue.use(Router)//定义路由const routes = [ ?{ ???path: ‘/‘, ???name: ‘homePage‘, ???component: homePage ?}, ?{ ???path: ‘/listPage/:id‘,//动态路由匹配,根据id，展示不同的栏目内容 ???name: ‘listPage‘, ???component: listPage ?}, ?{ ???path: ‘/detailPage/:id‘,//根据媒资id展示媒资内容 ???name: ‘detailPage‘, ???component: detailPage ?}, ?{ ???path: ‘/searchPage/:id‘,//根据搜索内容id展示搜索结果 ???name: ‘searchPage‘, ???component: searchPage ?}];
//创建 router 实例，传入 `routes` 配置
export default new Router({ ?routes})

import Vue from ‘vue‘import App from ‘./App‘import router from ‘./router‘Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ ?el: ‘#app‘, ?router, ?components: { App }, ?template: ‘<App/>‘})