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

 

打開頁面后