Vue-Router 相關理解 基本路由 多級路由
阿新 • • 發佈：2022-03-01
- vue-router初體驗
1.安裝v-router,命令 npm i vue-router
2.應用外掛vue.use(vueRouter)
3.編寫router配置項
建立路由模組，在 src 原始碼目錄下，新建 router/index.js 路由模組，初始化程式碼：檢視程式碼
import VueRouter from 'vue-router' // 引入VueRouter import About from '../components/About' // 路由元件 import Home from '../components/Home' // 路由元件 // 建立router例項物件，去管理一組一組的路由規則 const router = new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ] }) //暴露router export default router
4.在main.js檔案中匯入並掛載路由模組：
檢視程式碼
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
new Vue({
router,
render: (h) => h(App),
}).$mount('#app')在元件中宣告路由連結和佔位符：
檢視程式碼
<template> <div class="app-container"> <!-- 路由連結 --> <router-link to="/home">首頁</router-link> <router-link to="/about">關於</router-link> <router-link to="/movie">電影</router-link> <!-- 路由出口 --> <router-view></router-view> </div> </template>
注意事項：
元件分為路由元件和一般元件，前者放在 pages(或views) 資料夾，後者放在 components 資料夾
$route 儲存著元件的路由規則資訊
$router 是路由器物件，只有一個
<router-link> 的 replace 屬性
- 多級路由
1.配置路由規則，使用children配置項
檢視程式碼
routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ // 通過children配置子級路由 { path:'news', // 此處一定不要帶斜槓，寫成 /news component:News }, { path:'message', // 此處一定不要寫成 /message component:Message } ] } ]
2.跳轉(要寫完整的路徑)
<router-link to="/home/news">News</router-link>src/pages/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>src/pages/News.vue
檢視程式碼
<template>
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
</template>
<script>
export default {
name:'News'
}
</script>src/router/index.js
檢視程式碼
//該檔案專門用於建立整個應用的路由器
import VueRouter from "vue-router";
//引入元件
import Home from '../pages/Home'
import About from '../pages/About'
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
}
]
}
]
})