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

通过vue学习一：新建或打开vue项目，创建好项目后，接下来的操作为：

src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置

src目录重整

在项目中创建如下对应的文件

├── 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                    // 常用工具文件

比如给homePage.vue添加点内容

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

 

路由设置

App.vue中

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

router的index.js中配置路由

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
})

 

注入路由

在根实例（在main.js中）通过 router 配置参数注入路由，从而让整个应用都有路由功能

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/>'
})

 

vue细节记录

 

打开页面后