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細節記錄

 

打開頁面後