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

《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下載

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

//引入Vue模塊importVuefrom'vue’//引入路由模塊importVueRouterfrom'vue-router’//把路由對(duì)象加載到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.定義路由//每個(gè)路由應(yīng)該映射一個(gè)組件。其中"component"http://可以是通過Vue.extend()創(chuàng)建的組件構(gòu)造器，或者，只是一個(gè)組件配置對(duì)象。letroutes=[{path:'/',component:Home},{path:'/about',component:About}] //3.創(chuàng)建router實(shí)例，然后傳`routes`配置letrouter=newVueRouter({routes:routes}) //4.創(chuàng)建和掛載根實(shí)例,讓整個(gè)應(yīng)用都有路由功能letvm=newVue({router:router}).$mount("#app")1.2入門案例JavaScript1.安裝及基本配置1.3子路由子路由即是在原路由的基礎(chǔ)上增加一個(gè)children,children是一個(gè)數(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做路徑匹配時(shí)支持動(dòng)態(tài)路由、全匹配路由以及查詢參數(shù)使用路由傳遞參數(shù)：最后在模板里用$route.params.id進(jìn)行接收。<router-linkto="/user/1">用戶管理</router-link>letUser={template:'<div>User{{$route.params.id}}</div>’}letroutes=[//動(dòng)態(tài)路徑參數(shù)以冒號(hào)開頭//參數(shù)值會(huì)被設(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ù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。//字符串this.$router.push("/user/1")//對(duì)象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

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

要鏈接到一個(gè)命名路由，可以給router-link的to屬性傳一個(gè)對(duì)象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

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