一、vue-router使用步驟
-
第一步：創建路由組件
- 新建兩個組件
![在這裏插入圖片描述]()
- 新建兩個組件
-
第二步：配置路由映射：組件和路徑映射關係
index.js // 配置路由相關信息 import VueRouter from 'vue-router' import Vue from 'vue' // 引入組件的路徑 import Home from '../components/Home' import About from '../components/About' // 1.通過Vue.use（插件），安裝插件 Vue.use(VueRouter) // 2.創建VueRouter對象 const routes =[ { path: '/home', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ // 配置路由和組件之間的應用關係 routes }) // 3.將router對象傳入到Vue實例 export default router -
第三步：使用路由：通過 router-link 和 router-view
App.vue <template> <div id="app"> <router-link to="/home">首頁</router-link> <router-link to="/about">關於</router-link> <!-- 渲染組件內容 --> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> <style> </style>
二、路由的默認路徑
需求：有時候進入網頁需要直接顯示首頁，我們需要配置默認路徑
-
在index.js中配置
const routes =[ { // 重定向到首頁，打開網頁就是首頁 path: '', redirect: '/home' }, { path: '/home', component: Home }, { path: '/about', component: About } ]
三、標籤中的屬性
-
tag：router-link默認渲染成a標籤，tag可以修改成想要的標籤，例如button、li等
-
replace: 可以直接使用，無需賦值。網頁默認採用history.pushState進行前後頁面返回，加上replace，則不可以返回
-
active-class：指定本標籤的class名，用在style中，多個標籤class名一樣時，來回切換他們，可以實現按鈕變色。多個class修改太麻煩，可以在路由配置中添加linkActiveClass
// 第一種 <router-link to="/home" tag="button" replace active-class="active">首頁</router-link> <router-link to="/about" tag="button" replace active-class="active">關於</router-link> // 第二種class改名 const router = new VueRouter({ // 配置路由和組件之間的應用關係 routes, // 將url改成常見的history模式，不用帶'#'的哈希 mode: 'history', linkActiveClass: 'active' })
四、動態url
實現目標：
實現方法：
-
1
// index.js中添加 { path: '/user/:name', component: User } -
2.在App.vue標籤中動態獲取
五、獲取動態的數據並展示
實現目標：
將當前用戶展示出來
實現過程：
-
需要知道，router對象中有一個配置路由和組件之間的應用關係的routes，而 $route可以拿到當前活躍狀態的組件數據，如此，我們User頁面代碼添加如下：
<template> <div> <h2>我是用戶界面</h2> <p>我是用戶信息，嘿嘿嘿</p> <h2>用戶是：{{userId}}</h2> <h2>{{$route.params.abc}}</h2> </div> </template> <script> export default { name: "User", computed: { userId() { return this.$route.params.abc } } } </script> <style scoped> </style> -
注意
![在這裏插入圖片描述]()
是index.js中routes數組中的path中的動態id
![在這裏插入圖片描述]()
這裏不僅可以用計算屬性，還可以直接在標籤中取到這個數據
六、路由的嵌套使用
-
需求：往往一個頁面中需要嵌套其他的組件
-
使用步驟
1.創建Home的子組件——HomeNews和HomeMessage
2.給定一些標籤
// HomeNews.vue
<template>
<div>
<ul>
<li>新聞1</li>
<li>新聞2</li>
<li>新聞3</li>
<li>新聞4</li>
</ul>
</div>
</template>
<script>
export default {
name: "HomeNews"
}
</script>
<style scoped>
</style>
// HomeMessage.vue
<template>
<div>
<ul>
<li>消息1</li>
<li>消息2</li>
<li>消息3</li>
<li>消息4</li>
</ul>
<!--快速寫法： ul>li{消息$}*4-->
</div>
</template>
<script>
export default {
name: "HomeMessage"
}
</script>
<style scoped>
</style>
3.在Home模板中進行添加
// Home.vue
<template>
<div>
<h2>我是首頁</h2>
<p>我是首頁內容哈哈哈</p>
<router-link to="/home/news">新聞</router-link>
<router-link to="/home/message">消息</router-link>
<!-- 添加子組件的router-view-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style>
4.進行配置（重點）
// index.js
// 配置路由相關信息
import VueRouter from 'vue-router'
import Vue from 'vue'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'
// 路由懶加載
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const About = () => import('../components/About')
const User = () => import('../components/User')
// 1.通過Vue.use（插件），安裝插件
Vue.use(VueRouter)
// 2.創建VueRouter對象
const routes =[
{
// 重定向到首頁，打開網頁就是首頁
path: '',
redirect: '/home'
},
{
path: '/home',
component: Home,
// 添加屬於Home 的子組件,子組件路由path前面不需要加 '/ '
children: [
{
path: '',
redirect: 'news'
},
{
path: 'news',
component: HomeNews
},
{
path: 'message',
component: HomeMessage
}
]
},
{
path: '/about',
component: About
},
{
path: '/user/:abc',
component: User
}
]
const router = new VueRouter({
// 配置路由和組件之間的應用關係
routes,
// 將url改成常見的history模式，不用帶'#'的哈希
mode: 'history',
linkActiveClass: 'active'
})
// 3.將router對象傳入到Vue實例
export default router
- 在子組件配置時，需要將它配置在對應的父組件下，採用 [{ },{ },{ }] 形式，子組件的path不需要加斜槓