17.Vue-router路由 · 程序員開發筆記

[TOC] #### 1.定義一下單頁面路由注意：需要引入 Vue-roter.js <div id="hdcms"> <router-link to="/hdphp">HDPHP</router-link> <router-link to="/hdcms">HDCMS</router-link> <router-view></router-view> </div> <script> const hdphp={ template:'<h1>hdphp</h1>' } const hdcms={ template:'<h1>hdcms</h1>' } let routes=[ {path:'/hdphp',component:hdphp}, {path:'/hdcms',component:hdcms}, ]; //要把組件交給路由器 let router = new VueRouter({routes:routes}); new Vue({ el: '#hdcms', router:router }); </script> #### 2.vue-router之路由參數的隨意設置與偽靜態鏈接地址處理注意：需要引入 Vue-roter.js <div id="hdcms"> <router-link to="/content">內容 </router-link> <router-view></router-view> </div> <script type="text/x-template" id="content"> <div> cid:{{$route.params.cid}} - id:{{$route.params.id}} <br> <button @click="show">檢測參數</button> </div> </script> <script> const content={ template:'#content', methods:{ show(){ console.log(this.$route.params); } } } let routes=[ {path:'/content-:cid-show-:id.html',component:content}, ]; //要把組件交給路由器 let router = new VueRouter({routes}); new Vue({ el: '#hdcms', router }); </script> #### 3.vue-router之路由參數的驗證處理保存路由安全注意：需要引入 Vue-roter.js <div id="hdcms"> <router-link to="/content">內容 </router-link> <router-view></router-view> </div> <script type="text/x-template" id="content"> <div> id:{{$route.params.id}} <br> <button @click="show">檢測參數</button> </div> </script> <script> const content={ template:'#content', methods:{ show(){ console.log(this.$route.params); } } } let routes=[ {path:'/content/:id(\\d{2})',component:content}, ]; //要把組件交給路由器 let router = new VueRouter({routes}); new Vue({ el: '#hdcms', router }); </script> #### 4.vue-router之路由參數默認值的設置技巧注意：需要引入 Vue-roter.js <div id="hdcms"> <router-link to="/content">內容</router-link> <router-view></router-view> </div> <script type="text/x-template" id="content"> <div> id:{{id}} <button @click="show">檢測參數</button> </div> </script> <script> const content = { template: '#content', data(){ return { id: 0 } }, mounted(){ this.id = this.$route.params.id; if (!this.id) { this.id = 1; } }, methods: { show(){ console.log(this.$route.params); } } } let routes = [ {path: '/content/:id?', component: content}, ]; //要把組件交給路由器 let router = new VueRouter({routes}); new Vue({ el: '#hdcms', router }); </script> #### 5.vue-router之實例操作新聞列表單頁面應用與路由別名的使用注意：需要引入 Vue-roter.js <div id="hdcms"> <router-view></router-view> </div> <script type="text/x-template" id="home"> <div> <li v-for="v in news"> <router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link> </li> </div> </script> <script type="text/x-template" id="content"> <div> <h1>{{field.title}}-{{field.id}}</h1> <p> {{field.content}} </p> <router-link to="/">返回首頁</router-link> </div> </script> <script> var data = [ {id:1,title:'HDPHP開源免費框架',content:'這是內容....'}, {id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'} ]; const home = { template: '#home', data(){ return { news:data } } } const content = { template: '#content', data(){ return { field:{} } }, mounted(){ var id =this.$route.params.id; for(let k=0;k<data.length;k++){ if(data[k].id==id){ this.field = data[k]; } } } } let routes = [ {path: '/', component: home}, {path: '/content/:id', component: content,name:'content'}, ]; //要把組件交給路由器 let router = new VueRouter({routes}); new Vue({ el: '#hdcms', router }); </script> #### 6.Vue-router之路由嵌套在文章系統中的使用方法注意：需要引入 Vue-roter.js <div id="hdcms"> <router-view></router-view> </div> <script type="text/x-template" id="home"> <div> <li v-for="v in news"> <router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link> </li> <router-view></router-view> </div> </script> <script type="text/x-template" id="content"> <div> <h1>{{field.title}}-{{field.id}}</h1> <p> {{field.content}} </p> <router-link to="/">返回首頁</router-link> </div> </script> <script> var data = [ {id:1,title:'HDPHP開源免費框架',content:'這是內容....'}, {id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'} ]; const home = { template: '#home', data(){ return { news:data } } } const content = { template: '#content', data(){ return { field:{} } }, mounted(){ var id =this.$route.params.id; for(let k=0;k<data.length;k++){ if(data[k].id==id){ this.field = data[k]; } } } } let routes = [ {path: '/', component: home,children:[ {path: '/content/:id', component: content,name:'content'}, ]}, ]; //要把組件交給路由器 let router = new VueRouter({routes}); new Vue({ el: '#hdcms', router }); </script> #### 7.Vue-router之使用watch與mounted解決同一組件頁面不刷新數據的問題 <div id="hdcms"> <router-view></router-view> </div> <script type="text/x-template" id="home"> <div> <li v-for="v in news"> <router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link> </li> <router-view></router-view> </div> </script> <script type="text/x-template" id="content"> <div> <h1>{{field.title}}-{{field.id}}</h1> <p> {{field.content}} </p> <router-link to="/">返回首頁</router-link> </div> </script> <script> var data = [ {id:1,title:'HDPHP開源免費框架',content:'這是內容....'}, {id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'} ]; const home = { template: '#home', data(){ return { news:data } } } const content = { template: '#content', data(){ return { field:{} } }, watch:{ '$route'(to,from){ this.load(); } }, mounted(){ this.load(); }, methods:{ load(){ var id =this.$route.params.id; for(let k=0;k<data.length;k++){ if(data[k].id==id){ this.field = data[k]; } } } } } let routes = [ {path: '/', component: home,children:[ {path: '/content/:id', component: content,name:'content'}, ]}, ]; //要把組件交給路由器 let router = new VueRouter({routes}); new Vue({ el: '#hdcms', router }); </script> #### 8.vue-router之通過程序控制路由跳轉 <div id="hdcms"> <router-view></router-view> </div> <script type="text/x-template" id="home"> <div> <li v-for="v in news"> <a href="" @click.prevent="go(v.id)">{{v.title}}</a> </li> </div> </script> <script type="text/x-template" id="content"> <div> <h1>{{field.title}}-{{field.id}}</h1> <p> {{field.content}} </p> <a href="" @click.prevent="back()">返回</a> </div> </script> <script> var data = [ {id:1,title:'HDPHP開源免費框架',content:'這是內容....'}, {id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'} ]; const home = { template: '#home', data(){ return { news:data } }, methods:{ go(id){ //寫業務邏輯 // var url = '/content/'+id; //{name:'content',params:{id:id}} var url ={path:'/content/'+id} this.$router.push(url); } } } const content = { template: '#content', data(){ return { field:{} } }, watch:{ '$route'(to,from){ this.load(); } }, mounted(){ this.load(); }, methods:{ load(){ var id =this.$route.params.id; for(let k=0;k<data.length;k++){ if(data[k].id==id){ this.field = data[k]; } } }, back(){ this.$router.go(-1); } } } let routes = [ {path: '/', component: home}, {path: '/content/:id', component: content,name:'content'} ]; //要把組件交給路由器 let router = new VueRouter({routes}); new Vue({ el: '#hdcms', router }); </script> #### 9.vue-router之命名視圖的實例講解 <style> .menu{border:solid 2px #999;padding:10px;display: block;} .news{float:left;border:solid 1px red;padding:20px;width:300px;} .slide{float:left;border:solid 1px red;padding:20px;width:300px;} </style> <div id="hdcms"> <router-view class="menu"></router-view> <router-view class="news" name="news"></router-view> <router-view class="slide" name="slide"></router-view> </div> <script type="text/x-template" id="menu"> <div> <a href="http://houdunren.com">后盾人</a> <a href="http://www.houdunwang.com">后盾IT教育</a> </div> </script> <script type="text/x-template" id="news"> <div> <li v-for="v in news">{{v.title}}</li> </div> </script> <script type="text/x-template" id="slide"> <div> <li v-for="v in data">{{v.title}}</li> </div> </script> <script> const menu = { template: '#menu', } const news = { template: '#news', data(){ return { news:[ {title:'houdunren.com'}, {title:'hdphp.com'}, ] } } } const slide = { template: '#slide', data(){ return { data:[ {title:'后盾人'}, {title:'后盾PHP培訓'}, ] } } } let routes = [ { path: '/', components: { default: menu, news: news, slide: slide } }, ]; //要把組件交給路由器 let router = new VueRouter({routes}); new Vue({ el: '#hdcms', router }); </script> #### 10.vue-router之重定向redirect的使用技巧 <div id="hdcms"> <router-link to="/">首頁</router-link> <a href="http://www.houdunwang.com">后盾人</a> <router-link to="/about">關于我們</router-link> <router-view></router-view> </div> <script type="text/x-template" id="home"> <div> <li v-for="v in news"> <a href="" @click.prevent="go(v.id)">{{v.title}}</a> </li> </div> </script> <script type="text/x-template" id="content"> <div> <h1>{{field.title}}-{{field.id}}</h1> <p> {{field.content}} </p> <a href="" @click.prevent="back()">返回</a> </div> </script> <script> var data = [ {id:1,title:'HDPHP開源免費框架',content:'這是內容....'}, {id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'}, {id:3,title:'關于我們',content:'一個認真錄制視頻教程的有激情的團隊!!!!'} ]; const home = { template: '#home', data(){ return { news:data } }, methods:{ go(id){ //寫業務邏輯 // var url = '/content/'+id; //{name:'content',params:{id:id}} var url ={path:'/content/'+id} this.$router.push(url); } } } const content = { template: '#content', data(){ return { field:{} } }, watch:{ '$route'(to,from){ this.load(); } }, mounted(){ this.load(); }, methods:{ load(){ var id =this.$route.params.id; for(let k=0;k<data.length;k++){ if(data[k].id==id){ this.field = data[k]; } } }, back(){ this.$router.go(-1); } } } let routes = [ {path: '/', component: home}, {path: '/content/:id', component: content,name:'content'}, {path: '/about', redirect:{name:'content',params:{id:3}}} ]; //要把組件交給路由器 let router = new VueRouter({routes}); new Vue({ el: '#hdcms', router }); </script> #### 11.vue-router之使用路由別名定制URL <div id="hdcms"> <router-link to="/">首頁</router-link> <a href="http://www.houdunwang.com">后盾人</a> <router-link to="/about">關于我們</router-link> <router-view></router-view> </div> <script type="text/x-template" id="home"> <div> <li v-for="v in news"> <a href="" @click.prevent="go(v.id)">{{v.title}}</a> </li> </div> </script> <script type="text/x-template" id="content"> <div> <h1>{{field.title}}-{{field.id}}</h1> <p> {{field.content}} </p> <a href="" @click.prevent="back()">返回</a> </div> </script> <script> var data = [ {id:1,title:'HDPHP開源免費框架',content:'這是內容....'}, {id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'}, {id:3,title:'關于我們',content:'一個認真錄制視頻教程的有激情的團隊!!!!'} ]; const home = { template: '#home', data(){ return { news:data } }, methods:{ go(id){ //寫業務邏輯 // var url = '/content/'+id; //{name:'content',params:{id:id}} var url ={path:'/content/'+id} this.$router.push(url); } } } const content = { template: '#content', data(){ return { field:{} } }, watch:{ '$route'(to,from){ this.load(); } }, mounted(){ this.load(); }, methods:{ load(){ var id =this.$route.params.id; for(let k=0;k<data.length;k++){ if(data[k].id==id){ this.field = data[k]; } } }, back(){ this.$router.go(-1); } } } let routes = [ {path: '/', component: home}, {path: '/content/:id', component: content,name:'content'}, {path: '/content/3', alias:['/about']}, {path: '/content/2', alias:['/hdphp']} ]; //要把組件交給路由器 let router = new VueRouter({routes}); new Vue({ el: '#hdcms', router }); </script> #### 12.vue-router之使用html5history模式去除hash錨點生成優雅的url 1.創建..htaccess RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [L] <div id="hdcms"> <router-view></router-view> </div> <script type="text/x-template" id="home"> <div> <li v-for="v in news"> <a href="" @click.prevent="go(v.id)">{{v.title}}</a> </li> </div> </script> <script type="text/x-template" id="content"> <div> <h1>{{field.title}}-{{field.id}}</h1> <p> {{field.content}} </p> <a href="" @click.prevent="back()">返回</a> </div> </script> <script> var data = [ {id:1,title:'HDPHP開源免費框架',content:'這是內容....'}, {id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'} ]; const home = { template: '#home', data(){ return { news:data } }, methods:{ go(id){ //寫業務邏輯 // var url = '/content/'+id; //{name:'content',params:{id:id}} var url ={path:'/content/'+id+'.html'} this.$router.push(url); } } } const NotFound = { template: '<h1>你請求的頁面不存在</h1>', } const content = { template: '#content', data(){ return { field:{} } }, watch:{ '$route'(to,from){ this.load(); } }, mounted(){ this.load(); }, methods:{ load(){ var id =this.$route.params.id; for(let k=0;k<data.length;k++){ if(data[k].id==id){ this.field = data[k]; } } }, back(){ this.$router.go(-1); } } } let routes = [ {path: '/', component: home}, {path: '/content/:id.html', component: content,name:'content'}, {path: '*', component: NotFound}, ]; //要把組件交給路由器 let router = new VueRouter({ mode:'history', routes }); new Vue({ el: '#hdcms', router }); </script>