vue-router的使用
vue-router的使用
路由,其實就是指向的意思,當我點選頁面上的home按鈕時,頁面中就要顯示home的內容,如果點選頁面上的about 按鈕,頁面中就要顯示about 的內容。Home按鈕 => home 內容, about按鈕 => about 內容,也可以說是一種對映. 所以在頁面上有兩個部分,一個是點選部分,一個是點選之後,顯示內容的部分。
點選之後,怎麼做到正確的對應,比如,我點選home 按鈕,頁面中怎麼就正好能顯示home的內容。這就要在js 檔案中配置路由。
路由中有三個基本的概念 route, routes, router。
1, route,它是一條路由,由這個英文單詞也可以看出來,它是單數, Home按鈕 => home內容, 這是一條route, about按鈕 => about 內容, 這是另一條路由。
2, routes 是一組路由,把上面的每一條路由組合起來,形成一個陣列。[{home 按鈕 =>home內容 }, { about按鈕 => about 內容}]
3, router 是一個機制,相當於一個管理者,它來管理路由。因為routes 只是定義了一組路由,它放在哪裡是靜止的,當真正來了請求,怎麼辦? 就是當使用者點選home 按鈕的時候,怎麼辦?這時router 就起作用了,它到routes 中去查詢,去找到對應的 home 內容,所以頁面中就顯示了 home 內容。
4,客戶端中的路由,實際上就是dom 元素的顯示和隱藏。當頁面中顯示home 內容的時候,about 中的內容全部隱藏,反之也是一樣。客戶端路由有兩種實現方式:基於hash 和基於html5 history api.
1, 在src 目錄下新建兩個元件,home.vue 和 about.vue
<template>
<div>
<h1>home</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是home 元件"
}
}
}
</script>
<template>
<div>
<h1>about</h1>
<p>{{aboutMsg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
aboutMsg: '我是about元件'
}
}
}
</script>
2, 在 App.vue中 定義 和
<template>
<div id="app">
<img src="./assets/logo.png">
<header>
<!-- router-link 定義點選後導航到哪個路徑下 -->
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</header>
<!-- 對應的元件內容渲染到router-view中 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
3, 在 src目錄下再新建一個router.js 定義router, 就是定義 路徑到 元件的 對映。
import Vue from "vue";
import VueRouter from "vue-router";
// 引入元件
import home from "./home.vue";
import about from "./about.vue";
// 要告訴 vue 使用 vueRouter
Vue.use(VueRouter);
const routes = [
{
path:"/home",
component: home
},
{
path: "/about",
component: about
}
]
var router = new VueRouter({
routes
})
export default router;
4, 把路由注入到根例項中,啟動路由。這裡其實還有一種方法,就像vuex store 注入到根例項中一樣,我們也可以把vueRouter 直接注入到根例項中。在main.js中引入路由,注入到根例項中。
import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from "./router.js" // import router 的router 一定要小寫, 不要寫成Router, 否則報 can't match的報錯
new Vue({
el: '#app',
router, // 注入到根例項中
render: h => h(App)
})
5, 這時點選頁面上的home 和about 可以看到元件來回切換。但是有一個問題,當首次進入頁面的時候,頁面中並沒有顯示任何內容。這是因為首次進入頁面時,它的路徑是 ‘/’,我們並沒有給這個路徑做相應的配置。一般,頁面一載入進來都會顯示home頁面,我們也要把這個路徑指向home元件。但是如果我們寫{ path: ‘/’, component: Home },vue 會報錯,因為兩條路徑卻指向同一個方向。這怎麼辦?這需要重定向,所謂重定向,就是重新給它指定一個方向,它本來是訪問 / 路徑,我們重新指向‘/home’, 它就相當於訪問 ‘/home’, 相應地, home元件就會顯示到頁面上。vueRouter中用 redirect 來定義重定向。
const routes = [
{
path:"/home",
component: home
},
{
path: "/about",
component: about
},
// 重定向
{
path: '/',
redirect: '/home'
}
]
相關文章
- Vue-Router的使用方法Vue
- Vue-router的使用姿勢Vue
- vue-Router中name的使用Vue
- Vue-router外掛使用Vue
- vue-router之addRoutes使用遇到的坑Vue
- vue升級之路(三)-- vue-router的使用Vue
- 5分鐘瞭解vue-router的基本使用Vue
- 說說如何使用 vue-router 外掛Vue
- vue-router的鉤子Vue
- vue-router 原始碼:實現一個簡單的 vue-routerVue原始碼
- vue-routerVue
- 淺談Vue-router使用方法及動態路由和巢狀路由的使用Vue路由巢狀
- 【VUE】vue-router的基本用法Vue
- vue-router中scrollBehavior的妙用Vue
- 在移動端使用vue-router和keep-aliveVueKeep-Alive
- vue · 使用vue-router設定每個頁面的titleVue
- vue-router教程Vue
- 說說如何使用 vue-router 實現頁面跳轉Vue
- vue-router原理剖析Vue
- 認識vue-routerVue
- vue-router不跳轉Vue
- vue-router筆記Vue筆記
- vue-router中scrollBehavior的巧妙用法Vue
- (精華2020年5月8日更新) vue教程篇 vue-router路由的使用Vue路由
- vue-router 巢狀路由Vue巢狀路由
- vue-router命名檢視Vue
- vue-router路由基礎Vue路由
- vue-router相關配置Vue
- 淺談Vue-router的部分高階用法Vue
- 記一次前端菜鳥使用vuecli與vuex與vue-router前端Vue
- 實現一個簡化版的vue-routerVue
- 說說 vue-router 元件的高階應用Vue元件
- vue-router的hash模式和history模式詳解Vue模式
- 談一談對vue-router的簡單理解Vue
- 從301跳轉看vue-router的hash模式Vue模式
- vue-router元件複用共享$route的問題Vue元件
- vue-router思維導圖Vue
- Vue-Router學習筆記Vue筆記