vue router 配置路由的方法

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:10:57

vue router 配置路由的方法

vue router 配置路由的方法:用 Vue.js + vue-router 創(chuàng)建單頁(yè)應(yīng)用，是非常簡(jiǎn)單的。使用 Vue.js ，我們已經(jīng)可以通過(guò)組合組件來(lái)組成應(yīng)用程序，當(dāng)你要把 vue-router 添加進(jìn)來(lái)，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue router 配置路由的方法:用 Vue.js + vue-router 創(chuàng)建單頁(yè)應(yīng)用，是非常簡(jiǎn)單的。使用 Vue.js ，我們已經(jīng)可以通過(guò)組合組件來(lái)組成應(yīng)用程序，當(dāng)你要把 vue-router 添加進(jìn)來(lái)，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們

用 Vue.js + vue-router 創(chuàng)建單頁(yè)應(yīng)用，是非常簡(jiǎn)單的。使用 Vue.js ，我們已經(jīng)可以通過(guò)組合組件來(lái)組成應(yīng)用程序，當(dāng)你要把 vue-router 添加進(jìn)來(lái)，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。

路由的基本實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 /* 實(shí)現(xiàn)當(dāng)前 路由導(dǎo)航高亮 */
 .router-link-exact-active, .router-link-active {
 color: red;
 font-size: 30px;
 }
 </style> 
</head>

<body>
 <div id="app">
 <!-- 路由的入口，也就是a標(biāo)簽 -->
 <router-link to="/home">home</router-link>
 <router-link to="/about">about</router-link>

 <!-- 指定頁(yè)面中路由的出口，也就是：路由匹配組件將來(lái)展示在頁(yè)面中的位置 -->
 <router-view></router-view>
 </div>

 <script src="./vue.js"></script>
 <!-- 引入 路由插件 -->
 <script src="./node_modules/vue-router/dist/vue-router.js"></script>
 <script>
 /* 
 路由的使用步驟：
 1 引入 路由插件的js文件
 2 創(chuàng)建幾個(gè)組件
 3 通過(guò) VueRouter 來(lái)創(chuàng)建一個(gè)路由的實(shí)例，并且在參數(shù)中配置好路由規(guī)則
 4 將 路由實(shí)例 與 Vue實(shí)例關(guān)聯(lián)起來(lái)，通過(guò) router 屬性
 5 在頁(yè)面中使用 router-link 來(lái)定義導(dǎo)航（a標(biāo)簽） 路由路口
 6 在頁(yè)面中使用 router-view 來(lái)定義路由出口（路由內(nèi)容展示在頁(yè)面中的位置）
 */

 // Vue中的路由是：哈希值 和 組件的對(duì)應(yīng)關(guān)系

 // component 方法能夠返回一個(gè)對(duì)象，用這個(gè)對(duì)象就可以表示當(dāng)前組件
 const Home = Vue.component('home', {
 template: `<h1>這是 Home 組件</h1>`
 })
 const About = Vue.component('about', {
 template: `<h1>這是 About 組件</h1>`
 })

 // 配置路由規(guī)則
 const router = new VueRouter({
 // 通過(guò) routes 來(lái)配置路由規(guī)則，值：數(shù)組
 routes: [
 // 數(shù)組中的每一項(xiàng)表示一個(gè)具體的路由規(guī)則
 // path 用來(lái)設(shè)置瀏覽器URL中的哈希值
 // componet 屬性用來(lái)設(shè)置哈希值對(duì)應(yīng)的組件
 { path: '/home', component: Home },
 { path: '/about', component: About },
 // redirect 重定向: 讓當(dāng)前匹配的 / ,跳轉(zhuǎn)到 /home 對(duì)應(yīng)的組件中, 也就是默認(rèn)展示: home組件
 { path: '/', redirect: '/home' }
 ]
 })

 var vm = new Vue({
 el: '#app',

 // Vue的配置對(duì)象中有一個(gè)配置項(xiàng)叫做：router
 // 用來(lái)指定當(dāng)前要使用的路由
 // router: router
 router
 })
 </script>
</body>

</html>

重定向

解釋：將 / 重定向到 /home

{ path: '/', redirect: '/home' }

路由導(dǎo)航高亮

說(shuō)明：當(dāng)前匹配的導(dǎo)航鏈接，會(huì)自動(dòng)添加router-link-exact-active router-link-active類

路由參數(shù)

說(shuō)明：我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同一個(gè)組件，此時(shí)，可以通過(guò)路由參數(shù)來(lái)處理

語(yǔ)法：/user/:id

使用：當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到 this.$route.params

其他：可以通過(guò) $route.query 獲取到 URL 中的查詢參數(shù) 等

// 鏈接：
<router-link to="/user/1001">用戶 Jack</router-link>
<router-link to="/user/1002">用戶 Rose</router-link>

// 路由：
{ path: '/user/:id', component: User }

// User組件：
const User = {
 template: `<div>User {{ $route.params.id }}</div>`
}

嵌套路由 - 子路由

Vue路由是可以嵌套的，即：路由中又包含子路由

規(guī)則：父組件中包含 router-view，在路由規(guī)則中使用 children 配置

// 父組件：
const User = Vue.component('user', {
 template: `
 <div class="user">
 <h2>User Center</h2>
 <router-link to="/user/profile">個(gè)人資料</router-link>
 <router-link to="/user/posts">崗位</router-link>
 <!-- 子路由展示在此處 -->
 <router-view></router-view>
 </div>
 `
})

// 子組件：
const UserProfile = {
 template: '<h3>個(gè)人資料：張三</h3>'
}
const UserPosts = {
 template: '<h3>崗位：FE</h3>'
}

{ path: '/user', component: User,
 // 子路由配置：
 children: [
 {
 // 當(dāng) /user/profile 匹配成功，
 // UserProfile 會(huì)被渲染在 User 的 <router-view> 中
 path: 'profile',
 component: UserProfile
 },
 {
 // 當(dāng) /user/posts 匹配成功
 // UserPosts 會(huì)被渲染在 User 的 <router-view> 中
 path: 'posts',
 component: UserPosts
 }
 ]
}

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue router 配置路由的方法

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：方法 VUE 設(shè)置方法

熱門焦點(diǎn)

vue router 配置路由的方法

vue router 配置路由的方法

vue router 配置路由的方法

最新推薦

猜你喜歡

熱門推薦