第一個 vue-router 路由

路由，其實就是指向的意思，當(dāng)我點擊頁面上的home按鈕時，頁面中就要顯示home的內(nèi)容，如果點擊頁面上的about 按鈕，頁面中就要顯示about 的內(nèi)容。Home按鈕 => home 內(nèi)容， about按鈕 => about 內(nèi)容，也可以說是一種映射. 所以在頁面上有兩個部分，一個是點擊部分，一個是點擊之后，顯示內(nèi)容的部分。

使用 Vue.js 做項目的時候，一個頁面是由多個組件構(gòu)成的，所以在跳轉(zhuǎn)頁面的時候，并不適合用傳統(tǒng)的 href，于是 vue-router 應(yīng)運而生。
其本質(zhì)就是:建立并管理url和對應(yīng)組件之間的映射關(guān)系.

路由中有三個基本的概念 route, routes, router

1， route，它是一條路由，由這個英文單詞也可以看出來，它是單數(shù)， Home按鈕 => home內(nèi)容，這是一條route, about按鈕 => about 內(nèi)容，這是另一條路由。
2， routes 是一組路由，把上面的每一條路由組合起來，形成一個數(shù)組。[{home 按鈕 =>home內(nèi)容 }， { about按鈕 => about 內(nèi)容}
3， router 是一個機(jī)制，相當(dāng)于一個管理者，它來管理路由。因為routes 只是定義了一組路由，它放在哪里是靜止的，當(dāng)真正來了請求，怎么辦？就是當(dāng)用戶點擊home 按鈕的時候，怎么辦？這時router 就起作用了，它到routes 中去查找，去找到對應(yīng)的 home 內(nèi)容，所以頁面中就顯示了 home 內(nèi)容。
客戶端中的路由，實際上就是dom 元素的顯示和隱藏。當(dāng)頁面中顯示home 內(nèi)容的時候，about 中的內(nèi)容全部隱藏，反之也是一樣。客戶端路由有兩種實現(xiàn)方式：基于hash 和基于html5 history api.

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。包含的功能有：

嵌套的路由/視圖表
模塊化的、基于組件的路由配置
路由參數(shù)、查詢、通配符
基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
細(xì)粒度的導(dǎo)航控制
帶有自動激活的 CSS class 的鏈接
HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行為

安裝

vue-router 是一個插件包，所以我們還是需要用 npm/cnpm 來進(jìn)行安裝的。打開命令行工具，進(jìn)入你的項目目錄，輸入下面命令。

npm install vue-router --save-dev

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

使用

以下案例在 vue-cli 項目中使用 vue-router

創(chuàng)建組件頁面

創(chuàng)建一個名為 src/components 的目錄專門放置我們開發(fā)的 Vue 組件，在 src/components 目錄下創(chuàng)建一個名為 Content.vue 的組件，代碼如下：

<template>
    <div>
      我是內(nèi)容頁
    </div>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

路由映射

創(chuàng)建一個名為 src/router 的目錄專門放置我們的路由配置代碼，在 src/router 目錄下創(chuàng)建一個名為 index.js 路由配置文件，代碼如下：

import Vue from 'vue'
// 導(dǎo)入路由插件
import Router from 'vue-router'
// 導(dǎo)入上面定義的組件
import Content from '@/components/Content'

// 安裝路由
Vue.use(Router);

// 配置路由
export default new Router({
  routes: [
    {
      // 路由路徑
      path: '/content',
      // 路由名稱
      name: 'Content',
      // 跳轉(zhuǎn)到組件
      component: Content
    }
  ]
});

激活路由

修改 main.js 入口文件，增加配置路由的相關(guān)代碼

import Vue from 'vue'
import App from './App'
// 導(dǎo)入上面創(chuàng)建的路由配置目錄
import router from './router'

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  // 配置路由
  router,
  components: { App },
  template: '<App/>'
});

使用路由

修改 App.vue 組件，代碼如下：

<template>
  <div id="app">
    <router-link to="/">首頁</router-link>
    <router-link to="/content">內(nèi)容</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

說明：

router-link： 默認(rèn)會被渲染成一個 <a> 標(biāo)簽，to 屬性為指定鏈接
router-link組件來導(dǎo)航, 用戶點擊后切換到相關(guān)視圖.
router-view： 用于渲染路由匹配到的組件
router-view組件來設(shè)置切換的視圖在哪里渲染.(一個頁面也可以有多個router-view分別展示特定的視圖,并且支持嵌套)

效果演示

image

第一個 Vue 工程項目

從本章節(jié)開始，我們采用實戰(zhàn)教學(xué)模式并結(jié)合 ElementUI 組件庫，將所需知識點應(yīng)用到實際中，以最快速度帶領(lǐng)大家掌握 Vue 的使用

創(chuàng)建工程

使用 NPM 安裝相關(guān)組件依賴時可能會遇到權(quán)限問題，此時使用 PowerShell 管理員模式運行即可；開始菜單 -> 鼠標(biāo)右擊 -> Windows PowerShell (管理員)

image

創(chuàng)建一個名為 hello-vue 的工程

# 使用 webpack 打包工具初始化一個名為 hello-vue 的工程
vue init webpack hello-vue

image

安裝依賴

我們需要安裝 vue-router、element-ui、sass-loader 和 node-sass 四個插件

# 進(jìn)入工程目錄
cd hello-vue
# 安裝 vue-router
npm install vue-router --save-dev
# 安裝 element-ui
npm i element-ui -S
# 安裝 SASS 加載器
npm install sass-loader node-sass --save-dev

image

# 安裝依賴
npm install

image

啟動工程

npm run dev

image

運行效果

在瀏覽器打開 http://localhost:8080 你會看到如下效果

image

附：NPM 相關(guān)命令說明

npm install moduleName：安裝模塊到項目目錄下
npm install -g moduleName：-g 的意思是將模塊安裝到全局，具體安裝到磁盤哪個位置，要看 npm config prefix 的位置
npm install -save moduleName：--save 的意思是將模塊安裝到項目目錄下，并在 package 文件的 dependencies 節(jié)點寫入依賴，-S 為該命令的縮寫
npm install -save-dev moduleName：--save-dev 的意思是將模塊安裝到項目目錄下，并在 package 文件的 devDependencies 節(jié)點寫入依賴，-D 為該命令的縮寫

第一個 ElementUI 頁面 (登錄頁)

目錄結(jié)構(gòu)

在源碼目錄中創(chuàng)建如下結(jié)構(gòu)：

assets：用于存放資源文件
components：用于存放 Vue 功能組件
views：用于存放 Vue 視圖組件
router：用于存放 vue-router 配置

image

創(chuàng)建視圖

創(chuàng)建首頁視圖

在 views 目錄下創(chuàng)建一個名為 Main.vue 的視圖組件；該組件在當(dāng)前章節(jié)無任何作用，主要用于登錄后展示登錄成功的跳轉(zhuǎn)效果；

<template>
    <div>
      首頁
    </div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

創(chuàng)建登錄頁視圖

在 views 目錄下創(chuàng)建一個名為 Login.vue 的視圖組件，其中 el-* 的元素為 ElementUI 組件；

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">歡迎登錄</h3>
      <el-form-item label="賬號" prop="username">
        <el-input type="text" placeholder="請輸入賬號" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input type="password" placeholder="請輸入密碼" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登錄</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="溫馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>請輸入賬號和密碼</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表單驗證，需要在 el-form-item 元素中增加 prop 屬性
        rules: {
          username: [
            {required: true, message: '賬號不可為空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密碼不可為空', trigger: 'blur'}
          ]
        },

        // 對話框顯示和隱藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 為表單綁定驗證功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定頁面，該方式稱之為編程式導(dǎo)航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

創(chuàng)建路由

在 router 目錄下創(chuàng)建一個名為 index.js 的 vue-router 路由配置文件

import Vue from 'vue'
import Router from 'vue-router'

import Login from "../views/Login"
import Main from '../views/Main'

Vue.use(Router);

export default new Router({
  routes: [
    {
      // 登錄頁
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      // 首頁
      path: '/main',
      name: 'Main',
      component: Main
    }
  ]
});

配置路由

修改入口代碼

修改 main.js 入口代碼

import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router'

// 導(dǎo)入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'

// 安裝路由
Vue.use(VueRouter);

// 安裝 ElementUI
Vue.use(ElementUI);

new Vue({
  el: '#app',
  // 啟用路由
  router,
  // 啟用 ElementUI
  render: h => h(App)
});

修改 App.vue 組件代碼

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
  }
</script>

效果演示

在瀏覽器打開 http://localhost:8080/#/login 你會看到如下效果

image

配置嵌套路由

嵌套路由又稱子路由，在實際應(yīng)用中，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態(tài)路徑也按某種結(jié)構(gòu)對應(yīng)嵌套的各層組件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

創(chuàng)建嵌套視圖組件

用戶信息組件

在 views/user 目錄下創(chuàng)建一個名為 Profile.vue 的視圖組件；該組件在當(dāng)前章節(jié)無任何作用，主要用于展示嵌套效果；

<template>
    <div>
      個人信息
    </div>
</template>

<script>
    export default {
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

用戶列表組件

在 views/user 目錄下創(chuàng)建一個名為 List.vue 的視圖組件；該組件在當(dāng)前章節(jié)無任何作用，主要用于展示嵌套效果；

<template>
    <div>
      用戶列表
    </div>
</template>

<script>
    export default {
        name: "UserList"
    }
</script>

<style scoped>

</style>

配置嵌套路由

修改 router 目錄下的 index.js 路由配置文件，代碼如下：

import Vue from 'vue'
import Router from 'vue-router'

import Login from "../views/Login"
import Main from '../views/Main'

// 用于嵌套的路由組件
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'

Vue.use(Router);

export default new Router({
  routes: [
    {
      // 登錄頁
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      // 首頁
      path: '/main',
      name: 'Main',
      component: Main,
      // 配置嵌套路由
      children: [
        {path: '/user/profile', component: UserProfile},
        {path: '/user/list', component: UserList},
      ]
    }
  ]
});

說明：主要在路由配置中增加了 children 數(shù)組配置，用于在該組件下設(shè)置嵌套路由

修改首頁視圖

接著上一節(jié)的代碼，我們修改 Main.vue 視圖組件，此處使用了 ElementUI 布局容器組件，代碼如下：

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>用戶管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link to="/user/profile">個人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/user/list">用戶列表</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>內(nèi)容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分類管理</el-menu-item>
                <el-menu-item index="2-2">內(nèi)容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>個人信息</el-dropdown-item>
                <el-dropdown-item>退出登錄</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>Lusifer</span>
          </el-header>

          <el-main>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

說明：

在 <el-main> 元素中配置了 <router-view /> 用于展示嵌套路由
主要使用 <router-link to="/user/profile">個人信息</router-link> 展示嵌套路由內(nèi)容

效果演示

image

參數(shù)傳遞

我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，我們有一個 User 組件，對于所有 ID 各不相同的用戶，都要使用這個組件來渲染。此時我們就需要傳遞參數(shù)了；

使用路徑匹配的方式

修改路由配置

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile}

說明：主要是在 path 屬性中增加了 :id 這樣的占位符

傳遞參數(shù)

router-link

<router-link :to="{name: 'UserProfile', params: {id: 1}}">個人信息</router-link>

說明：此時我們將 to 改為了 :to，是為了將這一屬性當(dāng)成對象使用，注意 router-link 中的 name 屬性名稱 一定要和 路由中的 name 屬性名稱 匹配，因為這樣 Vue 才能找到對應(yīng)的路由路徑；

代碼方式

this.$router.push({ name: 'UserProfile', params: {id: 1}});

接收參數(shù)

在目標(biāo)組件中使用

{{ $route.params.id }}

來接收參數(shù)

使用 `props` 的方式

修改路由配置

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true}

說明：主要增加了 props: true 屬性

傳遞參數(shù)

同上

接收參數(shù)

為目標(biāo)組件增加 props 屬性，代碼如下：

  export default {
    props: ['id'],
    name: "UserProfile"
  }

模板中使用

{{ id }}

接收參數(shù)

組件重定向

重定向的意思大家都明白，但 Vue 中的重定向是作用在路徑不同但組件相同的情況下

配置重定向

修改路由配置

    {
      path: '/main',
      name: 'Main',
      component: Main
    },
    {
      path: '/goHome',
      redirect: '/main'
    }

說明：這里定義了兩個路徑，一個是 /main ，一個是 /goHome，其中 /goHome 重定向到了 /main 路徑，由此可以看出重定向不需要定義組件；

重定向到組件

設(shè)置對應(yīng)路徑即可

<router-link to="/goHome">回到首頁</router-link>

帶參數(shù)的重定向

修改路由配置

    {
      // 首頁
      path: '/main/:username',
      name: 'Main',
      component: Main
    },
    {
      path: '/goHome/:username',
      redirect: '/main/:username'
    }

重定向到組件

<router-link to="/goHome/Lusifer">回到首頁</router-link>

路由模式與 404

路由模式有兩種

hash：路徑帶 # 符號，如 http://localhost/#/login
history：路徑不帶 # 符號，如 http://localhost/login

修改路由配置，代碼如下：

export default new Router({
  mode: 'history',
  routes: [
  ]
});

處理 404

創(chuàng)建一個名為 NotFound.vue 的視圖組件，代碼如下：

<template>
    <div>
      頁面不存在，請重試！
    </div>
</template>

<script>
    export default {
        name: "NotFount"
    }
</script>

<style scoped>

</style>

修改路由配置，代碼如下：

    {
      path: '*',
      component: NotFound
    }

路由鉤子與異步請求

路由中的鉤子函數(shù)

beforeRouteEnter：在進(jìn)入路由前執(zhí)行
beforeRouteLeave：在離開路由前執(zhí)行

案例代碼如下：

  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("準(zhǔn)備進(jìn)入個人信息頁");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("準(zhǔn)備離開個人信息頁");
      next();
    }
  }

參數(shù)說明：

to：路由將要跳轉(zhuǎn)的路徑信息
from：路徑跳轉(zhuǎn)前的路徑信息
next：路由的控制參數(shù)
- next() 跳入下一個頁面
- next('/path') 改變路由的跳轉(zhuǎn)方向，使其跳到另一個路由
- next(false) 返回原來的頁面
- next((vm)=>{}) 僅在 beforeRouteEnter 中可用，vm 是組件實例

在鉤子函數(shù)中使用異步請求

安裝 Axios

npm install axios -s

引用 Axios

import axios from 'axios'
Vue.prototype.axios = axios;

在 beforeRouteEnter 中進(jìn)行異步請求，案例代碼如下：

  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("準(zhǔn)備進(jìn)入個人信息頁");
      // 注意，一定要在 next 中請求，因為該方法調(diào)用時 Vue 實例還沒有創(chuàng)建，此時無法獲取到 this 對象，在這里使用官方提供的回調(diào)函數(shù)拿到當(dāng)前實例
      next(vm => {
        vm.getData();
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("準(zhǔn)備離開個人信息頁");
      next();
    },
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/data.json'
        }).then(function (repos) {
          console.log(repos);
        }).catch(function (error) {
          console.log(error);
        });
      }
    }
  }

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue-router 路由

第一個 vue-router 路由

安裝

使用

創(chuàng)建組件頁面

路由映射

激活路由

使用路由

效果演示

第一個 Vue 工程項目

創(chuàng)建工程

安裝依賴

啟動工程

運行效果

附：NPM 相關(guān)命令說明

第一個 ElementUI 頁面 (登錄頁)

目錄結(jié)構(gòu)

創(chuàng)建視圖

創(chuàng)建首頁視圖

創(chuàng)建登錄頁視圖

創(chuàng)建路由

配置路由

修改入口代碼

效果演示

配置嵌套路由

創(chuàng)建嵌套視圖組件

用戶信息組件

用戶列表組件

配置嵌套路由

修改首頁視圖

效果演示

參數(shù)傳遞

使用路徑匹配的方式

修改路由配置

傳遞參數(shù)

router-link

代碼方式

接收參數(shù)

使用 props 的方式

修改路由配置

傳遞參數(shù)

接收參數(shù)

組件重定向

配置重定向

修改路由配置

重定向到組件

帶參數(shù)的重定向

修改路由配置

重定向到組件

路由模式與 404

處理 404

路由鉤子與異步請求

路由中的鉤子函數(shù)

在鉤子函數(shù)中使用異步請求

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

使用 `props` 的方式