Vue.js 生態之vue-router
阿新 • • 發佈:2018-10-31
onerror vue 重定向 跳轉 圖片 clas query code 傳遞
vue-router是什麽~~
vue-router是Vue的路由系統,定位資源的,我們可以不進行整頁刷新去切換頁面內容。
vue-router的安裝和基本配置
vue-router.js 可以下載 也可以用cdn,基本配置信息看如下代碼~~~
// html 代碼 <div id="app"> <div> <router-link to="/">首頁</router-link> <router-link to="/about">關於我們</router-link> </div> <div> <router-view></router-view> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script src="../js/router_demo.js"></script> //vue-router demojs 代碼 var routes = [ { path: "/", component: { template: `<div><h1>首頁</h1></div>` } }, { path: "/about", component: { template: `<div><h1>關於我們</h1></div>` } } ]var router = new VueRouter({ routes: routes, // 路由去掉# // mode: ‘history‘, }); var app = new Vue({ el: ‘#app‘, router: router, });
路由的一些方法
路由傳參以及獲取參數~~
// html 代碼 <div id="app"> <div> <router-link to="/">首頁</router-link> <router-link to="/about">關於我們</router-link> <router-link to="/user/琴女?age=20">琴女</router-link> <router-link to="/user/提莫">提莫</router-link> </div> <div> <router-view></router-view> </div> </div> //傳參以及獲取參數js 代碼 var routes = [ { path: "/", component: { template: `<div><h1>首頁</h1></div>` } }, { path: "/about", component: { template: `<div><h1>關於我們</h1></div>` } }, { path: "/user/:name", component: { template: `<div> <h1>我是:{{$route.params.name}}</h1> <h1>我年齡是:{{$route.query.age}}</h1> </div>`, } } ] var router = new VueRouter({ routes: routes, }); var app = new Vue({ el: ‘#app‘, router: router, });
命名路由~ 註意router-link裏to一定要v-bind~~
// html代碼 <div id="app"> <div> <router-link to="/">首頁</router-link> <router-link :to="{name: ‘about‘}">關於我們</router-link> <router-link to="/user/gaoxin?age=19">gaoxin</router-link> </div> <div> <router-view></router-view> </div> </div> // js代碼 let routes = [ { path: ‘/‘, component: { template: `<h1>這是主頁</h1>` } }, { path: "/about", name: "about", component: { template: `<h1>關於我們</h1>` } }, { path: "/user/:name", component: { template: `<div> <h1>我是{{$route.params.name}}</h1> <h2>我的年齡是{{$route.query.age}}</h2> </div> ` } } ]; let router = new VueRouter({ routes: routes, mode: "history" }); const app = new Vue({ el: "#app", router: router, mounted(){ console.log(this.$route) console.log(this.$router) } })命名路由
子路由~~ 以展示詳細為例~~
// 添加子路由變化的只有父級路由 // 基於上面的例子增加 // js 代碼 { path: "/user/:name", component: { template: `<div> <h1>我是:{{$route.params.name}}</h1> <h1>我年齡是:{{$route.query.age}}</h1> <router-link to="more" append>更多信息</router-link> <router-view></router-view> </div>`, }, children: [ { path: "more", component: { template: `<div> {{$route.params.name}}的詳細信息 </div>`, } } ] },子路由
手動訪問路由,以及傳參~~
// 基於上面例子追加 // html 代碼 <div id="app"> <div> <router-link to="/">首頁</router-link> <router-link to="/about">關於我們</router-link> <router-link to="/user/琴女?age=20">琴女</router-link> <router-link to="/user/提莫">提莫</router-link> // 添加一個button按鈕 <button @click="on_click">旅遊</button> </div> <div> <router-view></router-view> </div> </div> // js 代碼 // 註意路由name的使用 這是在原例子追加 var app = new Vue({ el: ‘#app‘, router: router, methods: { on_click: function () { setTimeout(function () { this.$router.push(‘/about‘) setTimeout(function () { this.$router.push({name: "user", params:{name: "琴女"},query:{age: 20}}) }, 2000) }, 2000) } } });手動路由~以及傳參
命名路由視圖 router-view
當我們只有一個<router-view></router-view>的時候~所有內容都展示在這一個面板裏面~
如果是content 和 footer 就需要同時顯示並且不同區域~這就需要對視圖進行命名~
// html 代碼 <div id="app"> <div> <router-link to="/">首頁</router-link> </div> <div> <router-view name="content" class="content-view"></router-view> <router-view name="footer" class="footer-view"></router-view> </div> </div> // js 中的主要代碼 var routes = [ { path: "/", components: { content: { template: `<div><h1>首頁</h1></div>`, }, footer: { template: `<div><h1>關於我們</h1></div>`, } } }, ]命名路由視圖
錯誤路由的重定向~~
let routes = [ { path: "**", redirect: "/" } ]redirect
$route以及$router的區別~~
-- $route為當前router調轉對象,裏面可以獲取name, path, query, params等~
-- $router為VueRouter實例,有$router.push方法等~~
路由的鉤子
路由的生命周期就是從一個路由跳轉到另一路由整個過程,下面介紹兩個鉤子~
router.beforeEach() router.afterEach() 詳情請看代碼~~
// html 代碼 <div id="app"> <router-link to="/">首頁</router-link> <router-link to="/login">登錄</router-link> <router-link to="/user">用戶管理</router-link> <div> <router-view></router-view> </div> </div> // js 代碼 var routes = [ { path: "/", component: { template: "<h1>首頁</h1>" } }, { path: "/login", component: { template: "<h1>登錄</h1>" } }, { path: "/user", component: { template: "<h1>用戶管理</h1>" } } ]; var router = new VueRouter({ routes: routes }); router.beforeEach(function (to,from,next) { // console.log(to) // console.log(from) // console.log(next) // next(false) if(to.path=="/user"){ next("/login") } else { next(); } }); router.afterEach(function (to, from) { console.log(to) console.log(from) }); var app = new Vue({ el: ‘#app‘, router: router });路由鉤子
next:function 一定要調用這個方法來resolve這個鉤子函數。 執行效果依賴next方法的調用參數 next() 什麽都不做繼續執行到調轉的路由 next(false) 中斷當前導航 沒有跳轉 也沒有反應 next("/") 參數是路徑 調轉到該路徑 next(error) 如果next參數是一個Error實例 導航終止該錯誤 會傳遞給router.onError()註冊過的回調中next 參數詳解
router.beforeEach(function (to,from,next) { console.log(to); console.log(from); console.log(next); next() }); 後面加 next()
上面的例子~~如果/user下面還有子路由的情況下會怎麽樣呢~????
// 匹配子路由 改一下匹配方法就可以~ // js 改動代碼 router.beforeEach(function (to,from,next) { // console.log(to) // console.log(from) // console.log(next) // next(false) if(to.matched.some(function (item) { return item.path == "/post" })){ next("/login") } else { next(); } }); // 元數據配置 改動代碼 // html 部分 { path: "/user", meta: { required_login: true, }, component: { template: ` <div> <h1>用戶管理</h1> <router-link to="vip" append>vip</router-link> <router-view></router-view> </div> ` }, children: [{ path: "vip", meta: { required_login: true, }, component: { template: ‘<h1>VIP</h1>‘ } }] } // js 部分 router.beforeEach(function (to,from,next) { // console.log(to) // console.log(from) // console.log(next) // next(false) if(to.meta.required_login){ next("/login") } else { next(); } });匹配子路由以及元數據配置
Vue.js 生態之vue-router