Vue之路由
阿新 • • 發佈：2018-11-11
bsp init 示例 style span query com ldr 人生苦短
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：
- 嵌套的路由/視圖表
- 模塊化的、基於組件的路由配置
- 路由參數、查詢、通配符
- 基於 Vue.js 過渡系統的視圖過渡效果
- 細粒度的導航控制
- 帶有自動激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
- 自定義的滾動條行為
Vue Router的安裝使用 :
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="d1"></div> <script> //第一步在Vue示例中使用VueRouter Vue.use(VueRouter); let Home = { template: ` <div> <h1>主頁</h1> </div> ` }; let Login = { template: ` <div><h1>登錄</h1></div> ` }; let Register= { template: ` <div><h1>註冊</h1></div> ` }; let App = { //第四步 //router-link會渲染成a標簽, to屬性相當於href屬性, to後面是router中定義的路徑 //router-view是頁面內容渲染的出口, 路由匹配到的組件將渲染在這裏 template: ` <div> <!--直接寫路徑版 <router-link to="/">首頁</router-link> <router-link to="/login">登錄</router-link> <router-link to="/register">註冊</router-link>--> <!--命名路由版 <router-link :to="{name: ‘home‘}">首頁</router-link> <router-link :to="{name: ‘login‘}">登錄</router-link> <router-link :to="{name: ‘register‘}">註冊</router-link> <router-view></router-view>--> <!--params是無參數名的傳參關鍵字 query是有參數名的傳參關鍵字 <router-link :to="{name: ‘home‘}">首頁</router-link> <router-link :to="{name: ‘login‘,params:{loginId: 1}}">登錄</router-link> <router-link :to="{name: ‘register‘,query:{reg: 1}}">註冊</router-link> <router-view></router-view>--> </div> `, }; //第二部實例化一個router對象 //本質上是將路徑和頁面內容綁定一個對應的關系 // 在真實的場景中，可有以下路徑形式 // user/1; // user/?userId=1; let router = new VueRouter({ mode: "history", routes: [ { name: "home", path: "/", component: Home, }, { //xxx/參數 name: "login", path: "/login/:loginId", component: Login }, { //xxx/?參數名=參數值 name: "register", path: "/register", component: Register } ] }); new Vue({ el: "#d1", template: `<App/>`, //第三部在根實例對象中註冊router對象 router: router, components: { App, } }) </script> </body> </html>
Vue Router子路由 :
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="d1"></div> <script> Vue.use(VueRouter); let Home = { template: `<div><h1>這是主頁</h1></div>` }; let Course = { template: ` <div> <h2>課程頁面</h2> <router-link :to="{name: ‘python‘}" append>派森</router-link> <router-link :to="{name: ‘linux‘}">linux</router-link> <router-view></router-view> </div>`, }; let Python = { template: `<div><h3>人生苦短,我用派森</h3></div>` }; let Linux = { template: `<div><h3>不會linux豈不是鹹魚</h3></div>` }; let Class = { template: ` <div> <h1>班級頁面</h1> <router-link :to="{name: ‘one‘}">一班</router-link> <router-link :to="{name: ‘two‘}">二班</router-link> <router-view></router-view> </div>` }; let One = { template: ` <div> <router-link :to="{name: ‘red‘}">一班啊</router-link> </div>` }; let Two = { template: `<div><h3>二班啊</h3></div>` }; let router = new VueRouter({ routes: [ { name: "home", path: "/", component: Home }, { name: "course", path: "/course", component: Course, children: [ { name: "python", path: "python", component: Python }, { //使用append自動添加前路徑的話.子路徑名前不能有" / " name: "linux", path: "linux", component: Linux }, { name: "red", path: "red", //重定向頁面 redirect: "/", } ] }, { name: "class", path: "/class", component: Class, children: [ { name: "one", path: "/class/one", component: One }, { name: "two", path: "/class/two", component: Two } ] }, ] }); let App = { template:` <div> <router-link :to="{name: ‘home‘}">首頁</router-link> <router-link :to="{name: ‘course‘}">課程</router-link> <router-link :to="{name: ‘class‘}">班級</router-link> <router-view></router-view> </div> `, }; new Vue({ el: "#d1", template:`<App/>`, components:{ App, }, router: router }) </script> </body> </html>
Vue之路由