第8章-Vue路由vue-router《Vue應(yīng)用程序開發(fā)》教學課件

《Vue應(yīng)用程序開發(fā)》?精品課件合集?精品課件合集Vue應(yīng)用程序開發(fā)（第八章Vue路由vue-router）目錄1、安裝和基本配置2、參數(shù)傳遞1安裝和基本配置1.1路由安裝1.2入門案例1.3子路由1.安裝及基本配置vue-router是Vue官方的路由插件，它和Vue是深度集成，適用于構(gòu)建單頁面應(yīng)用。直接引入<scripttype="text/javascript"src="js/vue.min.js"></script><!—一定在vue之后引入--><scripttype="text/javascript"src="js/vue-router.js"></script>1.1安裝路由1.安裝及基本配置npm下載

如果在一個模塊化工程項目中使用，必須要通過Vue.use()安裝路由功能，在src文件夾下的main.js文件中寫入以下代碼：npminstallvue-router

//引入Vue模塊importVuefrom'vue’//引入路由模塊importVueRouterfrom'vue-router’//把路由對象加載到Vue中Vue.use(VueRouter)

1.1安裝路由1.安裝及基本配置<scripttype="text/javascript"src="js/vue.min.js"></script><scripttype="text/javascript"src="js/vue-router.js"></script><divid="app"><div><router-linkto="/">首頁</router-link><router-linkto="/about">關(guān)于我們</router-link></div><!--路由出口--><!--路由匹配到的組件將渲染在這里--><router-view></router-view></div>HTML1.2入門案例1.安裝及基本配置//1.定義(路由)組件letHome=Vue.extend({template:'<h1>首頁</h1>'})letAbout={template:'<h1>關(guān)于我們</h1>’} //2.定義路由//每個路由應(yīng)該映射一個組件。其中"component"http://可以是通過Vue.extend()創(chuàng)建的組件構(gòu)造器，或者，只是一個組件配置對象。letroutes=[{path:'/',component:Home},{path:'/about',component:About}] //3.創(chuàng)建router實例，然后傳`routes`配置letrouter=newVueRouter({routes:routes}) //4.創(chuàng)建和掛載根實例,讓整個應(yīng)用都有路由功能letvm=newVue({router:router}).$mount("#app")1.2入門案例JavaScript1.安裝及基本配置1.3子路由子路由即是在原路由的基礎(chǔ)上增加一個children,children是一個數(shù)組.并且還需要在原來的組件上添加<router-view>來渲染chlidren里面的路由letUser={template:`<div>

用戶管理<router-view></router-view></div>`}letroutes=[{path:'/user',component:User,children:[{path:'search',component:UserSearch}]]2參數(shù)傳遞1.1傳參及獲取參數(shù)1.2編程式導(dǎo)航1.3命名路由和命名視圖2.參數(shù)傳遞vue-router做路徑匹配時支持動態(tài)路由、全匹配路由以及查詢參數(shù)使用路由傳遞參數(shù)：最后在模板里用$route.params.id進行接收。<router-linkto="/user/1">用戶管理</router-link>letUser={template:'<div>User{{$route.params.id}}</div>’}letroutes=[//動態(tài)路徑參數(shù)以冒號開頭//參數(shù)值會被設(shè)置到this.$route.params{path:'/user/:id',component:User},]2.1傳參和獲取參數(shù)vue-router利用url傳遞參數(shù)在地址欄傳入？key=value。在組件中通過$route.query.search獲取參數(shù)。letUser={template:'<div>User{{$route.query.search}}</div>'}2.1傳參和獲取參數(shù)2.參數(shù)傳遞2.參數(shù)傳遞在JS中要導(dǎo)航到不同的URL，可以使用router.push(location)方法。該方法的參數(shù)可以是一個字符串路徑，或者一個描述地址的對象。//字符串this.$router.push("/user/1")//對象this.$router.push({path:'/user/2’})//帶查詢參數(shù)，變成/user/2?name=張三&age=18this.$router.push({path:'/user/2',query:{name:'張三',age:18}})2.2編程式導(dǎo)航2.參數(shù)傳遞1.3

命名路由和命名視圖命名路由有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執(zhí)行一些跳轉(zhuǎn)的時候。你可以在創(chuàng)建Router實例的時候，在routes配置中給某個路由設(shè)置名稱。

要鏈接到一個命名路由，可以給router-link的to屬性傳一個對象letroutes=[{name:'user',path:'/user/:id',component:User,children:[ {path:'search',component:UserSearch}]}]<router-link:to="{name:'user',params:{id:123}}">User</router-link>this.$router.push({name:'user',params:{id:10}})2.參數(shù)傳遞1.3

命名路由和命名視圖命名視圖有時候想同時(同級)展示多個視圖，而不是嵌套展示，例如創(chuàng)建一個布局，有sidebar(側(cè)導(dǎo)航)和main(主內(nèi)容)兩個視圖，這個時候命名視圖就派上用場了。你可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口。如果router-view沒有設(shè)置名字，那么默認為default。

<divid="app"><router-view></router-view><router-viewname="user"></router-view><router-viewname="about"></router-view></div>HTML2.參數(shù)傳遞1.3

命名路由和命名視圖命名視圖

letHome=Vue.extend({template:'<h1>首頁</h1>'})letUser={template:'<h1>用戶管理</h1>'}letAbout={template:'<h1>關(guān)于我們</h1>'}

letrouter=newVueRouter({routes:[{name:'home',path:'/',components:{user:User,abo