CLI -- 路由基礎 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # 生成router.js文件中透露的技巧 ~~~ 1.你已經按照我們'Vue--模塊化方式結構'篇章中cli-ui篇章做了同等的結構目錄，先從router.js 做入手點，看一下自動生成的能給我們什么其他篇章中沒有的知識點 ~~~ >[danger] ##### 隱藏知識點 -- 路由控制組件懶加載 ~~~ 1.下面about路由組件中使用了import 進行組件導入，這樣導入的是，當路由控制組件顯示的時候，組件才顯示 ~~~ ~~~ import Home from '@/views/Home.vue' export default [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') } ] ~~~ >[danger] ##### 需要分清$route 和 $router ~~~ 1.'$router' 作為'VueRouter'實例對象可以用它提供的方法進行一些路由跳轉方面的操作 2.'$route' 可以獲取'當前路由規則，路徑,參數' ~~~ >[danger] ##### 分清history 和 hash ~~~ 1.兩種方式均為客戶端路由的實現方式：當路徑法發生變化，不會向服務器發送請求，使用js監視路徑的變化根據不同的地址渲染不同的內容，如果需要服務器端的內容會發送Ajax請求來獲取 1.1.Hash模式url中帶#號 #號后邊內容為路由地址 url帶井號或者問號 1.2.History 模式正常url模式 2.原理區別: 2.1.Hash模式是基于錨點，以及onhashchange事件。通過錨點值作為路由地址，路由變化后觸發onhashchange事件 2.2.History 模式是基于HTML5中的History API 有兼容問題 history.pushState() IE10以后才支持 history.replaceState() 不會向服務器發送請求，僅改變瀏覽器地址欄中的地址，并且將地址記錄到歷史記錄中 3.雖然History 模式不會向后臺發送請求，但是注意一點，用戶如果刷新頁面或者重新請求該地址會像后臺服務器發起請求，此時沒有對應連接對應的頁面會產生查找不到頁面，如果使用history模式需要后臺配合 4.vue-cli已經配置好了對history模式的支持，因此沒有以上的問題，即刷新后向服務器發送請求后并沒有返回404 5.總結： 5.1.'Hash 模式'： 5.1.1.URL中#后面的內容作為路徑地址，僅改變# 后面的內容則不會向服務器請求這個地址，但會記錄到訪問歷史中 5.1.2.監聽hashchange事件，url改變會觸發該事件 5.1.3.根據當前路由地址找到對應組件重新渲染 5.2.History 模式 5.2.1通過history.pushState()方法改變地址欄，僅改變地址欄并將其記錄到訪問歷史中，并不會跳轉到指定路徑即不會向服務器發送請求監聽 popstate 事件，可以記錄改變后的地址，調用pushState和replaceState時不會觸發該事件，后退或前進歷史頁面時才會觸發根據當前路由地址找到對應組件重新渲染 ~~~ >[info] ## 根據路由章節我們更應學到 ~~~ 1.強調：首先views文件夾中的內容和components文件夾中的內容雖然都是組件的形式，但是views 是將頁面劃分為組件，components中是頁面中單獨某一塊做成組件，這個組件可能在views中組件任意一個中使用 ~~~ >[danger] ##### 動態路由 -- 再次了解 ~~~ 1.顧名思義路由是動態生成，可以進行同一個類型url進行匹配，舉個例子: 'http://localhost:8080/#/argu/2', 'http://localhost:8080/#/argu/3', 'http://localhost:8080/#/argu/4', 2.這一個系列我們想做匹配，就像下面案例那樣我們把不確定參數生成一個 name變量做接受，在name變量前面加冒號來讓他動態起來 ~~~ * 在router.js 寫的一個路由匹配 ~~~ // 下面案例中argu.vue 在views 組件中聲明的，你也可以理解為views組件中的組件在能和路由做搭配 export default [ { path:'/argu/:name', component:() => import('@/views/argu.vue') } ] ~~~ >[danger] ##### 嵌套路由 -- 再次了解 ~~~ 1.顧名思義在路由中在做一個路由，為什么會有這樣的需求，首先有時候，我們在某個頁面點擊后，會跳轉另一個頁面，雖然跳轉到另一個頁面，但這個頁面和上個頁面卻有著關系，因此需要嵌套路由 2.嵌套路由使用的是'children'這個key在路由中，但是children路由中的地址，禁止連接前面加'/' 3.下面的案例中從'parent'跳到他的子路由'children',在連接地址的寫法是如下: 'http://localhost:8080/#/parent/children' 4.要注意，這里的子路由對應的組件也是寫到views 文件中，因為子路由對應的子組件，也是視圖 5.不是所有東西都要加'router-link',要知道他只是一個負責連接跳轉的標簽，而且相當于a標簽 ~~~ * 在router.js ~~~ export default [ { path:'/parent', component:() => import('@/views/parent.vue'), children:[ { // 不要加斜線 path:'children', component:() => import('@/views/children.vue'), } ] } ] ~~~ * parent.vue ~~~ <template>  <router-view></router-view> </template> <script> export default { name: "parent" } </script> <style scoped> </style> ~~~ >[danger] ##### 命名路由--再次了解 ~~~ 1.上面的案例都是通過'router-link' 中的'to'屬性和制定的連接進行搭配跳轉，命名路由則是，路由中定義的名字進行跳轉 2.思考為什么要這么做，首先在路由的時候，我們定義了一個組件和一個對應的跳轉鏈接，鏈接我們已經在路由階段定義好了，那么是否還需要在 'router-link' 在定義一次呢？其實這個就是利用了命名路由，我們在配置路由的時候加一個name，讓name和'router-link' 進行匹配 ~~~ * 在router.js 中（下面案例中我們吧路徑為about關聯的組件起了一個 name 叫 about） ~~~ import Home from '@/views/Home.vue' export default [ { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') }, ] ~~~ * 使用(to 一定要動態v-bind綁定，k為name。對應的value 為在router name對應，要注意value是個字符串) ~~~ <router-link :to="{name:'about'}">About</router-link> ~~~ >[danger] ##### 命名視圖 -- 讓多個視圖組件拼成一個大視圖 ~~~ 1.整個項目中有views 文件夾和components文件夾，雖然兩個都是組件，但是要注意的是，'views' 是視圖組件，'components' 是視圖組件中可能用到的公共組件，但是有時候一個視圖可能是幾個大視圖拼接成的。 2.舉個例子常見的頁面布局，左右結構，我們可以吧左面菜單當做一個視圖去維護，右面內容當做一個菜單去維護，然后兩個視圖組成一個布局這個時候就用到了視圖命名。 3.注意視圖命名是一組視圖組件構成的因此這里用的是'components' 加's' 4.下面案例中'default' 是默認的意思會對應，沒有name的視圖，'email','tel' 是對象名字相同的視圖 ~~~ * router.js ~~~ export default [ { path:'/name_view', components:{ default:()=>import('@/views/children.vue'), email:()=>import('@/views/email.vue'), tel:()=>import('@/views/tel.vue'), } } ] ~~~ * 在項目目錄中App.vue 使用的案例 ~~~ <router-view ><router-view/> <router-view name="email"></router-view> <router-view name="tel"></router-view> ~~~ >[danger] ##### 路由重定向 -- 再次了解 ~~~ 1.利用redirect，去定向到'/' 路由對應的組價 export default [ { path: '/', name: 'home', component: Home }, { path:'/main', redirect:'/' } ] ~~~ >[danger] ##### js -- 操作路由實例 ~~~ 1.在Vue 實例中，想訪問router 可以使用$router的方式去訪問，利用$router ,里面的方法可以去控制路由 2.this.$router.go(-1) -- 返回上一頁 this.$router.go(1) -- 前進一頁 this.$router.back()-- 返回上一頁 this.$router.push('參數是路由地址')-- 跳轉指定頁 3.this.$router.push 還可以像案例中使用一個對象，來規定一個路由參數連接形式如下: 'http://localhost:8080/#/parent?name=lison' ~~~ * 在Home.vue中案例 ~~~ <template> <div class="home"> <button @click="handleClick('push')">跳轉鏈接</button> <button @click="handleClick('back')">前一頁</button> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld }, methods:{ handleClick(type){ if(type === "back") this.$router.back(); else if(type === 'push'){ this.$router.push({ path:'/parent', query:{ name:"lison" } } )} } } } </script> ~~~ >[danger] ##### 路由解耦傳參 ~~~ 1.詳細內容可以參考路由篇章 ~~~ >[danger] ##### 路由的優先級 ~~~ 1.詳細內容可以參考路由篇章,優先級從上到下 2.這里有個小提示,用戶訪問的不存在的頁面應該返回404,想讓一面返回404, 在配置路由的時候一定要在,這個路由的最下面,用星號做匹配,在router文件夾下router.js 可以這么: export default[ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') }, { path:'*', component:() => import(/* webpackChunkName: "about" */ '@/views/404.vue') } ] ~~~