VueRouter爬坑第一篇-簡單實踐

admin 3C資訊

VueRouter系列的文章示例編寫時，項目是使用vue-cli腳手架搭建。

項目搭建的步驟和項目目錄專門寫了一篇文章：

後續VueRouter系列的文章的示例編寫均基於該項目環境。

 VueRouter系列文章鏈接

　　

　　《VueRouter爬坑第二篇》-動態路由

　　《VueRouter爬坑第三篇》-嵌套路由

 本篇文章完整代碼請移步：

　　

 

 

閱讀目錄

一.前言

二.安裝VueRouter

　　1.npm 安裝VueRouter

　　2.如何使用VueRouter

三.組件和路由之間的映射

　　1.<router-link>編寫可以跳轉的url

　　2.編寫跳轉的目的組件

　　3.定義路由

　　4.入口文件main.js配置路由

　　5.配置組件渲染的位置

四.總結

 

一.前言

　　關於項目的搭建我們在文章最前面已經給了鏈接，在項目搭建這篇文章的最底部有一個注意事項，為了能清楚的理解本篇文章，我再把注意事項貼在這裏：

　　

　　我們的項目在使用vue-cli初始化的時候是沒有安裝vue-router的，所以如果你的在初始化的時候安裝了vue-router，那這篇文章的有些部分可能不太適用了。

　　請大家謹慎觀看。

二.安裝VueRouter

1.npm 安裝VueRouter

　　安裝命令：npm install vue-router

　　

2.如何使用VueRouter

　　安裝完成之後，需要有兩個步驟才能使用

　　第一步：引入vue-router

　　　　

　　第二步：將組件註冊到全局（全局註冊后，在別的組件中可以直接使用，無需單獨引入）

 　　　 

 　　這塊先貼出步驟，暫時不寫代碼，後面做組件和路由映射的時候在把代碼寫上。

三.組件和路由之間的映射

　　接着我們的疑問就來了：頁面中的一個URL如何匹配到我們編寫的組件？下面我們就一步一步揭開這個疑惑。

1.<router-link>編寫可以跳轉的url

　  關於router-link的官方文檔說明可查看

　　關於上面的疑問，我們第一步需要先編寫一個可以跳轉的URL。我們先把項目中默認生成的HelloWorld.vue組件中div.hello中的內容刪除，然後在加上我們自己的內容。

 

E:\MyStudy\test\VueDemo\src\components\HelloWorld.vue

 

<template>
  <div class="hello">
    <p>這裡是HelloWorld組件</p>
    <!-- 可跳轉的URL -->
    <router-link to="/index">點擊這裏渲染出另外一個組件</router-link>   
  </div>
</template>
// 後面的script和style沒有修改，因此省略

 

App組件不做修改，這裏就不貼代碼了，接着我們使用npm run dev啟動項目查看一下瀏覽器效果。

web頁面效果

 

<template> <div class=”hello”> <p>這裡是HelloWorld組件</p> <!– 可跳轉的URL –> <router-link to=”/index”>點擊這裏去另外一個組件</router-link> </div> </template> // 後面的script和style沒有修改，因此省

2.編寫跳轉的目的組件

　　因為我們要實現url跳轉，因此需要編寫一個跳轉的目的組件。在這裏我們創建一個組件Index。

E:\MyStudy\test\VueDemo\src\components\Index.vue

<template>
    <div>  
        <h1>這裡是Index.vue組件</h1>
    </div>
</template>
<script>
export default {
    name: 'Index'
}
</script>

3.定義路由

　　現在可點擊的URL準備好了，跳轉的目標組件也準備好了。接下來就是定義路由配置：將URL映射到組件。

　　一般項目中為了後續好維護，會將路由配置單獨寫在一個文件中。因此我們先在E:\MyStudy\test\VueDemo\src 目錄下創建一個rotuer目錄，在該目錄下創建一個router.js文件，後面所有的路由配置均在該文件中編寫。

　　創建路由配置文件

　　

E:\MyStudy\test\VueDemo\src\router\router.js

// vue-router使用第一步：引入vue-router
import Vue from "vue"
import Router from "vue-router"

// vue-router使用第二步：組件註冊到全局
Vue.use(Router)

// 第三步：定義路由配置
// 引入路由需要映射的組件
import Index from '@/components/Index.vue'
const routes = [
    {
        path: '/index',   // 匹配的URL
        component: Index  //映射的目標組件
    }
]

// 第四步：創建vue-router實例，傳遞前面定義的路由配置
const router = new Router({
    routes: routes
})

// 第五步：將vue-router實例使用export導出（供其他模塊使用）
export default router

　　步驟一和步驟二在前面我們已經說過，步驟四和步驟五基本都是固定的配置不可缺少。

　　第三個步驟中的routes就是稱為路由配置，可以看到routes是一個數組，它可以包含多個字典對象。每一個字典對象就是一條單個的路由。

　　我們寫的這個路由只有最簡單的兩個配置項：path和component，註釋中有說明這兩個配置項的含義。

 

4.入口文件main.js配置路由

　　前面的三個部分完成后，還需要在入口文件處把這個路由實例注入到跟組件中，這樣整個應用都可以擁有路由功能。

E:\MyStudy\test\VueDemo\src\main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/router'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  //將路由實例註冊到根組件中
  router: router
})

 

大功告成，我們現在點擊界面的鏈接試一下

 

 

 

 

 　　在這裏呢，賣了個關子少了一個步驟：沒有告訴vue-router把匹配到的組件渲染到哪裡。

5.配置組件渲染的位置

<!-- 使用下面的這個標籤可以告訴vue-router將匹配到的組件渲染到這個位置 -->
<router-view>  </router-view>

 

然後我們將該段代碼加入到HelloWorld.vue這個組件中。

E:\MyStudy\test\VueDemo\src\components\HelloWorld.vue

<template>
  <div class="hello">
    <p>這裡是HelloWorld組件</p>
    <!-- 可跳轉的URL -->
    <router-link to="/index">點擊這裏去另外一個組件</router-link>
    
    <!-- 使用下面的這個標籤可以告訴vue-router將匹配到的組件渲染到這個位置 -->
    <router-view></router-view>
  </div>
</template>
// 後面的script和style沒有修改，因此省略

 

現在我們重新試一下效果

 

 

 

 

 

現在可以看到點擊鏈接后界面發生了變化：

index.vue中的內容显示到了HelloWorld.vue中router-view配置的位置

url由localhost:8080/#/變為localhost:8080/#/index

四.總結

　　至此，一個簡單的url路由到組件的實例就完成了，現在總結一下前面梳理過的內容

　　1.需要使用npm安裝vue-router。

注意：在使用veue init 初始化項目的時候會提示是否安裝vue-router，如果選擇是，那後續就不需要再次手動安裝了。

　　2.可以使用<router-link/>編寫可跳轉的url，並使用<router-view/>指定組件的渲染位置

　　3.創建Vue-Router實例，傳入配置的路由：最簡單的路由配置就是path和component

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※台北網頁設計公司這麼多，該如何挑選?? 網頁設計報價省錢懶人包"嚨底家"

※網頁設計公司推薦更多不同的設計風格，搶佔消費者視覺第一線

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

※南投搬家費用,距離,噸數怎麼算?達人教你簡易估價知識!