vue router(路由)的最基礎使用
---------------------
作者：甲殼蟲歐尼醬
來源：CSDN
原文：https://blog.csdn.net/qq_34131399/article/details/79404844
版權宣告：本文為博主原創文章，轉載請附上博文連結！
我們這裡只是第一步使用router，最簡單的一步先踏出去，不涉及動態路由、巢狀路由的使用。
剛聽到路由的時候，只能大概知道可能這是與路徑和目標有關。
正確的來說，在web開發中，路由是指根據url分配到對應的處理程式。在我看來路由就像是指路牌，在這個url中('http://blog.csdn.net/qq_34131399/article/details/79393260'),我們可以將‘/***’這樣的組合看成是我們站在一個有多個方向的路口，具體的如"/article"就是指我們去article的路牌。我們要到目的地要通過多個需要選擇的路口，我們走的這一路，將經過的路牌串起來，就是url了。所以為了讓我們的程式按照我們規劃的路線行進，我們就要用到路由。
這裡的路由比起計算機其他方面的路由要簡單得多，就是起到對頁面組合替換進行源頭到目的地的引導作用，就像a標籤一樣，你點了我，我就帶你去指定的地方。
vue中引用路由，我們要在建立專案時點選‘需要vue-router’，也可以後來再安裝‘vue-router’，使用npm install vue-router進行安裝。
這裡說一下router的三個容易混淆的概念:
首先先看一下官方給的程式碼:
// 0. 如果使用模組化機制程式設計，匯入Vue和VueRouter，要呼叫 Vue.use(VueRouter)
// 1. 定義（路由）元件。
// 可以從其他檔案 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定義路由
// 每個路由應該對映一個元件。 其中"component" 可以是
// 通過 Vue.extend() 建立的元件構造器，
// 或者，只是一個元件配置物件。
// 我們晚點再討論巢狀路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 建立 router 例項，然後傳 `routes` 配置
// 你還可以傳別的配置引數, 不過先這麼簡單著吧。
const router = new VueRouter({
routes // （縮寫）相當於 routes: routes
})
// 4. 建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 現在，應用已經啟動了！
上邊有三個長的很像的，分別是router、route、routes,初學很容易就會看混淆。
route:上邊示例沒有給出但是它是routes的單數形式，就是代表一個指路牌，有一個名字和指向的元件，like this ->{path:'/***',component:***}。
routes:它的後邊有個s，所以它就要高階一點，是route的複數形式，是一個route組成的陣列，包含一組route。
router:router是一個VueRouter的物件，用來管理路由，所以它內部肯定會有routes屬性，還有其他的屬性和方法。
當我們要使用時，我們只需要配好路由，把每一個需要的路由配置好，然後將路由掛載到根例項上全域性就都可以使用了。
我用vue-cli建立的vue專案，裡邊就有個完整的vue並且帶上路由的結構。
箭頭所指就是路由管理的地方。我通常都是把所有的路由配到這裡，這樣統一管理也比較直觀。
寫了幾個簡單的，這裡的元件都是.vue檔案的元件。
import Vue from 'vue'
import Router from 'vue-router'
//引入.vue元件
import FindBack from '@/components/FindBack'
import AboutUs from '@/components/AboutUs'
import NearbyThing from '@/components/NearbyThing'
import FullForm from '@/components/FullForm'
Vue.use(Router)//宣告使用Router
export default new Router({
routes: [
{
path: '/',
redirect:'/a',//重定向
name: 'FindBack',
component: FindBack
},
{
path: '/a',
name: 'FindBack',
component: FindBack
},
{
path: '/c',
name: 'AboutUs',
component: AboutUs
},
{
path: '/b',
name: 'NearbyThing',
component: NearbyThing
}
]
})
因為在main.js檔案中已經引入，所以我們就可以直接全域性使用了。
使用有兩種方法一種是類似a標籤的使用，一種是用函式來使用。
1.標籤式使用方法
<router-view></router-view> //這裡先預留一個坑
<router-link to="/bar">Go to Bar</router-link>//當我們在頁面上點選‘Go to Bar’時就將指向的元件填到頁面上的坑裡
2.函式式（程式設計式）使用方法
// 字串 這裡的字串就是url的一個組成部分 比如'/****'
router.push('home')
// 物件
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢引數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
我覺得對於初學者來說，先不考慮後邊三種使用方式。不過記得在使用時，我們要import你管理router的js檔案。
現在我們來串一串流程:
管理路由的js檔案
import Vue from 'vue'
import Router from 'vue-router'
import FindBack from '@/components/FindBack'//一下幾個import都是引入.vue的元件檔案
import AboutUs from '@/components/AboutUs'
import NearbyThing from '@/components/NearbyThing'
import FullForm from '@/components/FullForm'
Vue.use(Router)//向vue說明 我們要使用路由
export default new Router({
routes: [
{
path: '/',
redirect:'/a',//匹配到這個字串時我們重定向到'/a'這裡來，也就是重新指向一個路由
name: 'FindBack',
component: FindBack
},
{
path: '/a',
name: 'FindBack',
component: FindBack
},
{
path: '/c',
name: 'AboutUs',
component: AboutUs
},
{
path: '/b',
name: 'NearbyThing',
component: NearbyThing
}
]
})
使用路由頁面:
<template>
<div id="app">
<router-view v-on:nearbything_="changeBButtomStage"></router-view>
<!-- 這裡帶引數呼叫函式 不同引數就匹配不同的路由 -->
<button v-on:click='chooseMe(1)'>1</button>
<button v-on:click='chooseMe(2)'>1</button>
<button v-on:click='chooseMe(3)'>1</button>
</div>
</template>
<script>
import router from "./router";//引入管理router的js檔案
export default {
data() {
return {}
},
methods: {
// 根據選擇的按鈕進行頁面跳轉 或者 按鈕顏色變換
chooseMe: function(i) {
switch (i) {//判斷選擇哪一個路由
case 1:
router.push("/a");
break;
case 2:
router.push("/b");
break;
case 3:
router.push("/c");
break;
}
}
}
</script>
另外還有其他的元件檔案，選擇不同路由就將不同的元件塞入預留的坑裡。