Vue Router 學(xué)習(xí)

前言

隨著ajax興起，頁面請求越來越多，是用來處理單頁應(yīng)用 SPA(single page web application)的不二之選

SPA應(yīng)用特點(diǎn)體現(xiàn)在如下：

頁面交互是無刷新

頁面的跳轉(zhuǎn)也是無刷新的

原理是 匹配不同的 url 路徑，進(jìn)行解析，然后動態(tài)的渲染出區(qū)域 html 內(nèi)容

每當(dāng)切換路由的時候，在DOM中刪除上一個路由節(jié)點(diǎn)（from），渲染一個新的節(jié)點(diǎn)(to)-- 可使用緩存路由

keep-alive,從而不使用這種銷毀再創(chuàng)建的模式

可是url 每次變化的時候，都會造成頁面的刷新，

那么解決辦法就是在改變 url 的情況下，保證頁面的不刷新

2014年以前前端路由是通過hash模式進(jìn)行

通過類似這樣 http://www.xxx.com/#login

這種 #的后面部分 ，后面的 hash 值會發(fā)生變化

并不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求，瀏覽器不發(fā)出請求，也就不會刷新頁面。

另外每次 hash 值的變化，還會觸發(fā) hashchange 事件, 從而我們可知hash 發(fā)生了哪些變化

*** window.onhashchange***

然后我們可以監(jiān)聽 hashchange 來實(shí)現(xiàn)頁面的更新

14年后HTML5 標(biāo)準(zhǔn)發(fā)布多了兩個API `pushState· `replaceState`

至此url路徑變得美觀。（如果你愿意使用 vue-router 的同時開啟 history模式的話）

mode:'history'

Vue Router 在模塊化編程中的用法

現(xiàn)在來配置一個簡單路由

$\color{#ff0000}{注意:}$ 加入路由跳轉(zhuǎn)頁面的組件都創(chuàng)建在 src 目錄下的 view下比較好

view 下為頁面級組件，一般不復(fù)用，一般引用 components下面的小組件

components 下為小組件，常用組件，一般會復(fù)用

router 名詞，路由器（發(fā)出動作者）

route 名詞，路由（所走的路徑）

routes名詞（復(fù)數(shù)）（代表一組路由路徑）

src 目錄下創(chuàng)建一個文件夾為router
在router 文件夾下創(chuàng)建 index.js 文件

main.js 中導(dǎo)入且聲明使用

import router from './router' // 省略了 /index.js 這是因?yàn)閣ebpack默認(rèn) index true

new Vue({
  router, //實(shí)例中使用
  store,
  render: h => h(App)
}).$mount('#app')

編寫index.js 文件

import VueRouter from 'vue-router' //導(dǎo)入前 記得導(dǎo)入前置 vue

Vue.use(VueRouter) // 使用

產(chǎn)生一個對象并向外暴露
```
export default new VueRouter({
    
})
```

在routes中配置 n個路由

export default new VueRouter({
    mode:'history',
    routes: [    //多條對象，理因是一個數(shù)組
        {
            // 第1條路由
            path: '/',
            component: xxx // 對應(yīng)映射的組件名 請?jiān)谑褂弥跋葘?dǎo)入組件
        },
        {
            // 第2條路由
            path: '/xxx',

        }
    ]
})

在App組件中的模板中在需要點(diǎn)擊跳轉(zhuǎn)路由的地方指定 router-link

<router-link to="/xxx">這里配置要顯示的文本，相當(dāng)于 a 連接</router-link>

to 里面的參數(shù)一定要寫 routers 中的 path 對應(yīng)一致

在指定變化的部分中加入router-view

<templete>
    <div id='app'>
        <nav>
            <router-link to="">Home</router-link>
            <router-link to="">About</router-link>
        </nav>
        <div class="main-body">
            <router-view></router-view>  <!--這里是需要變化的部分-->
        </div>
    </div>
</templete>

現(xiàn)在來配置一個嵌套路由

$\color{#ff0000}{注意:}$ 配置嵌套路由的時候，會出現(xiàn)如下情況：

下面這些問題，好像是我當(dāng)初router-link 里面的 to 與 index.js 里面的路由映射對應(yīng)>不上所以才產(chǎn)生的問題, 請仔細(xì)檢查自己有沒有配錯！

指定的層級嵌套路由路徑不正確（時刻注意 path 中最左邊的 / 代表根路徑，請寫全，/father/child,或者直接省略為 xxx）

在加入子路由嵌套的時候使用簡寫path會發(fā)生問題，點(diǎn)擊子組件后不顯示，（這個問題發(fā)生在父組件的path為/的時候）,將/更改為具體的名稱(或者老老實(shí)實(shí)寫全路徑)
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    children: [
      {
        path: '/home/news',  // 靠近path 最左側(cè)的那個 /  代表根路徑
        name: 'news',
        component: News
      },
      {
        path: 'message', // 這個時候簡寫會出現(xiàn)問題，點(diǎn)擊會渲染不出，必須寫全/home/message
        name: 'message',
        component: Message
      }
    ]
  },
  {
    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: '/home', //修改在這里
name: 'home',
component: Home,
children: [
  {
    path: '/home/news',  
    name: 'news',
    component: News
  },
  {
    path: 'message', // 簡寫沒問題了
    name: 'message',
    component: Message
  }
]
},

在寫path的時候，如果在 router-link 中用到了該 path，請一定對照寫一致，

在寫name的時候，必須寫引入的組件中組件的名字，如：
  export default {
      name: 'Login', //假設(shè)這是 登陸組件
  }
在路由中配置：
{
    path:'/login', //隨意指定
    name:'Login', //不能隨意指定，必須大小寫一致，寫成login就不行，vue默認(rèn)按照組件名稱渲染路由
    component:Login
}

緩存路由組件

用來保持組件的狀態(tài)，在tab選項(xiàng)卡中跳轉(zhuǎn)有時候需要查看下上一個tab的信息，但是之前的數(shù)據(jù)是從后臺

獲取來的，這個時候不需要再次請求數(shù)據(jù)（實(shí)時性要求比較低的），減小服務(wù)器壓力，來使用 keep-alive保持，緩存這個組件對象

<keep-alive>
    <router-view></router-view>
</keep-alive>

使用編程式路由

意思就是不使用 <router-link> xxx </router-link>,這樣的點(diǎn)擊跳轉(zhuǎn)，在代碼執(zhí)行的時候決定跳轉(zhuǎn)路由

this.$router.push('/toPath')

使用 `watch`來監(jiān)視路由的最新變化

vue中，獲取實(shí)時最新的狀態(tài)的方法就是 watch

如果有以下需求：

左邊的樹結(jié)構(gòu)是發(fā)起ajax 請求成功后渲染出來的，

左邊的每一個樹節(jié)點(diǎn)node 都有唯一的一個 Key標(biāo)識

當(dāng)點(diǎn)擊某一個node的時候，進(jìn)行路由跳轉(zhuǎn)，需要傳遞對應(yīng)的 Key標(biāo)識改變路由跳轉(zhuǎn)

結(jié)構(gòu)和需求看起來像下面這樣：

在這里插入圖片描述

路由跳轉(zhuǎn)時攜帶參數(shù) params (此處沒用 query來攜帶參數(shù))

params與 query的區(qū)別請點(diǎn)擊

this.$router.push({name:'ModuleConfig',params:{index:n}})

// 得到 n 的值不在這里提出

右邊的router-view區(qū)域中使用watch

data(){
    return{
        index: this.$route.params.index
    }
}

好像有說法:

router只負(fù)責(zé)寫（傳）

route 只負(fù)責(zé)讀（取）

'$route'(to,from){
    this.index = to.params.index  //獲取實(shí)時最新的 后綴 index，然后index 變化時，整個表單變化
}
// 左值 index 定義在 data 中(普通屬性)
// 右值 在路由跳轉(zhuǎn)的攜帶參數(shù)中取出

router 中的 index.js 修改配置

const routes = [
    {
        path:'/ModuleConfig/:index',  //要對應(yīng)
        name:'ModuleConfig',
        component:ModuleConfig,
    }
]

這里還可以將 index定義成 computed 屬性

computed:{
    index(){
        return this.$route.params.index
    }
}

如果你需要分別拿到 oldvalue，newvalue，那顯然 watch更合適

watch更像是為屬性改變的前后定義的一個鉤子函數(shù)，可以點(diǎn)擊此處參考查看我的另一篇文章中寫到的區(qū)別

以后再慢慢更新,最后說下：

任何時候都參照下 Vue 風(fēng)格指南都是好的。比如 static與 assets文件夾的區(qū)別，又比如view與components文件夾的區(qū)別,說不定每次 vue-cli 的更新都會帶來 vue ui 構(gòu)建項(xiàng)目后的文件夾不一致呢？ GO to Vue 風(fēng)格指南

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue Router 入門

Vue Router 入門

Vue Router 學(xué)習(xí)

前言

Vue Router 在模塊化編程中的用法

現(xiàn)在來配置一個簡單路由

現(xiàn)在來配置一個嵌套路由

緩存路由組件

使用編程式路由

使用 `watch`來監(jiān)視路由的最新變化

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue Router 入門

Vue Router 學(xué)習(xí)

前言

Vue Router 在模塊化編程中的用法

現(xiàn)在來配置一個簡單路由

現(xiàn)在來配置一個嵌套路由

緩存路由組件

使用編程式路由

使用 watch來監(jiān)視路由的最新變化

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

使用 `watch`來監(jiān)視路由的最新變化