關於 vue-router
vue-router 筆記
關於 vue-router
vue-router 是在單頁面應用中，在組件之間切換，其本質就是:建立管理 url 和對應組件之間的映射關係
router.js : 管理 rul 與相對應的組件
router-link : 觸發要因循的 rul (組件)
router-view : 顯示由 router-link 依循 router.js 中的路徑顯示相對應的組件
<router-link to="/Home"> Go to Home</router-link> //通過傳入 to 屬性指定連結(url)
<router-view> 路由匹配到的組件將渲染在這裡 </router-view>
在 vue cli 中，會將 router-link、router-view 寫在 App.vue 這個檔案中。
JavaScript 撰寫?
1.定義(路由)組件
可以從其他文件 import 進來
const Foo = { template : '<div>foo</div>' }
vue cli 在一個組件上，可以將 template、script、style 三個元素所撰寫的資料集中寫在一個 .vue 檔案中。
例如，有一個 views 資料夾下的 Home.vue
#views/Home.vue
<template>
<!-- HTML.. -->
<h1>Hello Vue.js</h1>
</template>
<script>
// JS..
</script>
<style>
/* class... */
</style>
所以 router.js 中使用 import 方式引用組件
import Home from './views/Home.vue
2.定義路由
每個路由應該映射一個組件。其中 "component" 可以是通過 Vue.extend() 來創建一個新的組件
#router.js
const routers = [
{path:'/home', component: Home }
]
3.創建 router 實例，然後傳 'routers' 配置
const router = new VueRouter({
routes //相當於 routes:routes
})
於 vue cli 中定義路由以下面的方式建立
#router.js
Vue.use(Router) //呼叫 VueRouter 這個模組
export default new Router({
router:[
{
path: 'home',
component: Home
}
]
})
4.創建和掛載實例
vue cli 中新增一個 main.js 來掛載 router 實例
#main.js
import router from './router'
new Vue({
router,
render: h => h(app) //在 vue cli 中加入此段
}).$mount('#app')
現在，應用程式已經啟動了
關於 render 可以參考這篇 render: h => h(App) 是什麼？
簡短說，叫 vue 去呼叫 reder 這個 function，然後帶了一個也是 function 的參數進來，就是我們所寫的 App.vue 作為參數並帶入這個 function(指 h)，最後 return 出去。
目錄結構
src
├── App.vue
├── main.js
├── router.js
└── views
└── Home.vue完整程式碼
#App.vue
<router-link to="/Home">Go to Home</router-link>
<router-view></router-view>
#main.js
import router from './router'
new Vue({
router,
render: h => h(app)
}).$mount('#app')
#router.js
import Home from './views/Home.vue
Vue.use(Router)
export default new Router({
router:[
{
path: 'home',
component: Home
}
]
})
#views/Home.vue
<template>
<h1>Hello Vue.js</h1>
</template>
通過注入路由，我們可以在任何組件內通過 this.$router 訪問路由器，也可以通過 this.$route 訪問當前路由對象:
Tips :這裡我簡單說明下$router和$route的區別:
$router是指整個路由實例 ,你可以操控整個路由,通過'$router.push'往其中添加任意的路由對象.
$route:是指當前路由實例('$router')跳轉到的路由對象 ;
路由實例可以包含多個路由對象.它們是父子包含關係.
// Home.vue
export default {
computed: {
username () {
// 我們很快就會看到 `params` 是什麼
return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
}
vue-router的兩種模式
一般單頁面應用是(SPA)不會請求頁面而是只更新視圖. vue-router提供了兩種方式來實現前端路由:Hash模式和History模式,可以用mode參數來決定使用哪一種方式。
Hash模式
總而言之:Hash模式就是通過改變#後面的值,實現瀏覽器渲染指定的組件.
History模式
總而言之:History模式就是通過pushState()方法來對瀏覽器的瀏覽記錄進行修改,來達到不用請求後端來渲染的效果.不過建議,實際項目還是使用history模式
#router.js
const router = new VueRouter({
mode: 'history', //如果這裡不寫，路由默認為 hash 模式
routes: [...]
})
了解更多看這篇 vue-router 的兩種模式
