文章目錄
- 路由的了解
- 路由的基本使用
- 一些注意點
- 嵌套路由
路由的了解
生活中的路由：
vue-router的了解：
vue 的一個插件庫，專門用來實作SPA應用(single page web application)
對SPA應用的了解：
1.單頁Web應用(single page web application，SPA)
2.整個應用隻有一個完整的頁面
3.點選頁面中的導航連結不會重新整理頁面，隻會做頁面的局部更新
4.資料需要通過ajax請求擷取
什麼是路由?
1.—個路由就是一組映射關系 (key - value)
2. key 為路徑, value 可能是 function 或 component
路由分類
1.後端路由：
1)了解：value 是 function，用于處理用戶端送出的請求
2)工作過程：伺服器接收到一個請求時，根據請求路徑找到比對的函數來處理請求，傳回響應資料
2.前端路由：
1)了解：value 是 component，用于展示頁面内容
2)工作過程：當浏覽器的路徑改變時，對應的元件就會顯示
路由的基本使用
我們需要完成一個功能，點選左側導航切換右側内容，頁面如下：
前提：布局編寫
我們之前在 public 下建立了 css 檔案夾，并放入了 bootstrap.css，并在 index.html 中進行了引入：
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"> 在 App.vue 中編寫布局：
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body"><h2>我是About的内容</h2></div>
</div>
</div>
</div>
</div>
</template> 建立 About.vue 和 Home.vue 元件，兩個檔案隻有文字不同
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: "About"
}
</script>
<style scoped>
</style> 1、安裝vue-router
由于我們目前學習的是 vue2 ，是以我們需要指定 vue-router 的 3 版本，不指定會預設安裝 4 版本，而 4 版本隻能在 vue3 中使用，是以我們執行：
npm i vue-router@3
2、和 components 同級，建立 router 檔案夾，其下建立 index.js
//該檔案用于建立整個應用的路由器
import VueRouter from "vue-router";
import About from "../components/About";
import Home from "../components/Home";
//建立并暴露一個路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
},
]
}) 3、main.js 引入 vue-router，引入路由器
vue-router 是個插件，是以我們在 main.js 中引入并使用，同時引入剛才寫的 index.js，并配置
//引入Vue
import Vue from 'vue';
//引入App
import App from './App';
//引入vue-router
import VueRouter from "vue-router";
//引入路由器
import router from "@/router";
//關閉vue的生産提示
Vue.config.productionTip = false
//應用插件
Vue.use(VueRouter)
//建立vm
new Vue({
el: "#app",
render: h => h(App),
router:router
}) 4、修改頁面
App.vue 中 a 标簽改為
<router-link>
，其中
active-class
可配置高亮樣式
<!--原始html中我們使用a标簽實作頁面的跳轉-->
<!--<a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href=" . / home. html">Home</a>-->
<!--vue中我們使用router-link标簽實作路由的切換-->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link> 把要區分展示的位置改為
<router-view>
标簽
<div class="panel-body">
<!--指定元件的呈現位置-->
<router-view></router-view>
</div> 運作程式：
一些注意點
1、路由元件通常存放在 pages 檔案夾，一般元件通常存放在 components檔案夾
我們把頭部單獨寫成一個元件，建立 Banner.vue
<template>
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</template>
<script>
export default {
name: "Banner"
}
</script> 在App.vue 中引入并使用
<template>
<div>
<div class="row">
<Banner/>
</div>
<div class="row">
......
</div>
</div>
</template>
<script>
import Banner from "@/components/Banner";
export default {
name: 'App',
components: {Banner},
}
</script> 我們把 Banner 叫作一般元件，而 About、Home 我們叫作路由元件，一般放在 pages 檔案夾裡，是以需要修改：
2、通過切換，“隐藏"了的路由元件，預設是被銷毀掉的，需要的時候再去挂載
3、每個元件都有自己的
$route
屬性，裡面存儲着自己的路由資訊
4、整個應用隻有一個
router
，可以通過元件的
$router
屬性擷取到
嵌套路由
先看效果：
建立 Message.vue 和 News.vue
Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<a href="/ message1">{{m.title}}</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Message",
data(){
return{
messageList:[
{id:"001",title:"消息001"},
{id:"002",title:"消息002"},
{id:"003",title:"消息003"},
]
}
}
}
</script>
<style scoped>
</style> News.vue
<template>
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
</template>
<script>
export default {
name: "News"
}
</script> 制定路由規則，修改 index.js
//該檔案用于建立整個應用的路由器
import VueRouter from "vue-router";
import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
//建立并暴露一個路由器
export default new VueRouter({
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: 'news',
component: News
},
{
path: 'message',
component: Message
}
]
},
]
}) 修改 Home.vue
<template>
<div>
<h2>Home元件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>