VueRouter爬坑第一篇-簡單實踐

 

---

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

項目搭建的步驟和項目目錄專門寫了一篇文章：點擊這裏進行傳送

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

---

 VueRouter系列文章連接

　　《VueRouter爬坑第一篇》-簡單實踐

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

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

---

 閱讀目錄

一.安裝VueRouter

　　1.npm 安裝VueRouter

　　2.如何使用VueRouter

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

　　1.<router-link>編寫能夠跳轉的url

　　2.編寫跳轉的目的組件

　　3.定義路由

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

　　5.配置組件渲染的位置

三.總結

---

 

一.安裝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>
    <!-- 使用<router-link>編寫可跳轉的URL -->
    <router-link to="/index">點擊這裏去另一個組件</router-link>
  </div>
</template>
// 後面的script和style沒有修改，所以省略

 

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'
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