青草久久精品,福利一二三区久久

安裝

1.直接下載/cdn
https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com提供基于npm的CDN鏈接。以上鏈接將始終指向npm上的最新版本。您還可以通過URL等使用特定版本/標簽https://unpkg.com/vue-router@2.0.0/dist/vue-router.js。

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

2.NPM安裝，一般推薦使用這種
一般其實我們在構(gòu)建 vue 應用的時候就可以選擇默認把他先安裝上去。

npm install vue-router

模塊系統(tǒng)一起使用時，必須通過Vue.use()以下方式顯式安裝路由器：

//引入相關(guān)文件，使用Vue.use()即可
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

介紹

Vue Router是VueJs的官方路由器，他與vuejs核心，深度集成，使用它構(gòu)建單頁面應用會變得輕而易舉。

功能介紹

嵌套路由/視圖映射
模塊化，基于組件的路由器配置
路線參數(shù)，查詢，通配符
查看由Vue.js過渡系統(tǒng)提供支持的過渡效果
細粒度的導航控制
與自動活動CSS類的鏈接
HTML5歷史模式或哈希模式，在IE9中具有自動回退功能
可自定義的滾動行為

入門

使用Vue + Vue路由器創(chuàng)建單頁應用程序非常簡單。使用Vue.js，我們已經(jīng)在使用組件編寫應用程序。將Vue Router添加到混合中時，我們需要做的就是將組件映射到路由，讓Vue Router知道在哪里渲染它們。這是一個基本的例子：

route-link

可以看作是導航鏈接點擊去定制頁面
to中的路徑是導航 url 中的頁面路徑，并非項目路徑。
注意：路徑必須在 index.js中已經(jīng)配置完畢

    <router-link to="/">go home</router-link>
    <router-link to="/school">go school</router-link>

＃HTML

app.vue中添加 route-view標簽用來切換視圖

<template>
<div id="app">
    <router-view>
      
    </router-view>
</div>
</template>

//home.vue作為我們的首頁
<template>
    <div class="home">
        <h2>home</h2>
    </div>
</template>

<script>
    export default{
        data(){
            return{

            }
        }
    }
</script>

在router文件夾下的index.js修改
引入home和其他頁面，進行配置路由路徑

import Vue from 'vue'
import Router from 'vue-router'
import home from '../pages/home'

Vue.use(Router)

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

export default new Router({
  routes: [
    {
      path:'/',
      name:'home',
      component:home
    },
    {
      path: '/foo',
      name: 'Foo',
      component: Foo
    },
    {
      path: '/bar',
      name: 'Bar',
      component: Bar
    }
  ]
})

我們通過在home.vue中打印 console.log(this.$route)，可以查看路由對象的內(nèi)容。

image.png

根據(jù)以上實例就能在不同的 url下切換頁面了。

動態(tài)路由匹配

我們經(jīng)常需要將具有給定模式的路線映射到同一個組件。例如，我們可能有一個User應該為所有用戶呈現(xiàn)但具有不同用戶ID的組件。在vue-router我們可以在路徑中使用動態(tài)段以實現(xiàn)：

const User = { template:'<div>User {{ $route.params.id }}</div>' }

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User }
  ]
})

動態(tài)段由冒號表示，匹配路徑的時候，動態(tài)段的字段（這里的id）this.$router.params.id，將會向每一個組件中公開，我們可以進行取值獲得 id。

image.png

上圖就是直接在 div中獲取了，動態(tài)字段
User {{ $route.params.id }}

另外我們還可以在動態(tài)字段后面繼續(xù)添加動態(tài)段。如圖：

image.png

除此之外$route.params，該$route對象還公開了其他有用的信息，例如$route.query（如果URL中有查詢）$route.hash等。您可以在API參考中查看完整的詳細信息

對params更改作出反應

意思是僅僅對動態(tài)段內(nèi)容的修改做出反應，如上面提到的 /user/:id 中的id的變化。

從id1 到id2的變化，會重用相同的組件實例。由于兩個路由都是相同的組件 user，因此這比銷毀舊實例，創(chuàng)建新實例更有效。既然是重用原來的組件，也就意味著不會調(diào)用生命周期鉤子函數(shù)。因為生命周期鉤子函數(shù)只會在一個組件從無到有的過程中產(chǎn)生。

要對同一個組件的 params 的更改作出反應，我們只需要觀察 $router 對象就可以了。

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

或者，使用2.2中介紹的beforeRouteUpdate 導航防護：

const User = { 
  template:'<div>User {{ $route.params.id }}</div>' ,
  watch:{
    '$route'(to,from){
      console.log(to)
      console.log(from)
      //其中 to 代表新的修改后內(nèi)容，from代表之前的
    }
  }
}

image.png

上圖可看到：
/user/123456 是我們新修改的
/user/12345 是我們原來的id

高級匹配模式

vue-router使用path-to-regexp作為其路徑匹配引擎，因此它支持許多高級匹配模式，例如可選動態(tài)段，零個或多個/一個或多個要求，甚至自定義正則表達式模式。查看這些高級模式的文檔，以及使用它們的示例vue-router

匹配優(yōu)先級

有時，多個路由可能會匹配相同的URL。在這種情況下，匹配優(yōu)先級由路由定義的順序確定：路由定義越早，它獲得的優(yōu)先級越高。
而且并不會被后面的路由覆蓋。

嵌套路由

真正的應用程序UI通常嵌套多個級別的組件組成，url的每一段對應著嵌套組件的結(jié)構(gòu)也是很常見的。

image.png

有了 vue-router，使用嵌套路由來表達就容易了很多。

我們還是使用之前創(chuàng)建的應用程式。

<div id="app">
  <router-view></router-view>
</div>

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const User = { 
  template:'<div>User {{ $route.params.id }}</div>' ,
  watch:{
    '$route'(to,from){
      console.log(to)
      console.log(from)
    }
  }
}

export default new Router({
  routes: [
    {
      path:'/',
      name:'home',
      component:home
    },
    {
      path: '/foo',
      name: 'Foo',
      component: Foo
    },
    {
      path: '/bar',
      name: 'Bar',
      component: Bar
    },
    {
      path:'/user/:id',
      component:User
    }
  ]
})

app.vue中的route-view是一個頂級出口，同樣，渲染組件也可以包含自己的嵌套組件<router-view>。例如，如果我們在User組件的模板中添加一個：

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

現(xiàn)在我們已經(jīng)在 user 組件中添加了一個 route-view 的模塊。
如果想要把內(nèi)容放進去的話，我們需要在 VueRouter中添加一個 children 選項。

修改 index.js后如下：

import Vue from 'vue'
import Router from 'vue-router'
import home from '../pages/home'

Vue.use(Router)

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const child1 = { template: '<div>child1</div>' }
const child2 = { template: '<div>child2</div>' }
const User = { 
  template:
    `<div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>` ,
  watch:{
    '$route'(to,from){
      console.log(to)
      console.log(from)
    }
  }
}

export default new Router({
  routes: [
    {
      path:'/',
      name:'home',
      component:home
    },
    {
      path: '/foo',
      name: 'Foo',
      component: Foo
    },
    {
      path: '/bar',
      name: 'Bar',
      component: Bar
    },
    {
      path:'/user/:id',
      component:User,
      children:[
        {
          path: 'child1',
          component: child1
        },
        {
          path: 'child2',
          component: child2
        }
      ]
    }
  ]
})

結(jié)果如下：

image.png

程序化導航

除了使用<router-link>為聲明性導航創(chuàng)建錨標簽之外，我們可以使用路由器的實例方法以編程方式執(zhí)行此操作。也就是在js中操作路由。

router.push(location, onComplete?, onAbort?)

我們在Vue實例的內(nèi)部可以訪問路由的實例 $router。因此你可以調(diào)用this.$router.push
想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

當我們設(shè)置好route-link時，這方法會內(nèi)部自動嗲用，所以說，點擊 <router-link :to="...">等同于調(diào)用 router.push(...)。

image.png

this.$router.push(location, onComplete?, onAbort?)

該方法的參數(shù)可以是一個字符串路徑，或者是一個描述對象的地址。

// 字符串
router.push('home')

// 對象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 會被忽略，上述例子中的 query 并不屬于這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有參數(shù)的 path：

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

操作History

你也許注意到 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像，實際上它們確實是效仿 window.historyAPI 的。

因此，如果你已經(jīng)熟悉 Browser History APIs，那么在 Vue Router 中操作 history 就是超級簡單的。

還有值得提及的，Vue Router 的導航方法 (push、 replace、 go) 在各類路由模式 (history、 hash 和 abstract) 下表現(xiàn)一致。

思考

vue 中router.go；router.push和router.replace的區(qū)別

router.go(n)

這個方法的參數(shù)是一個整數(shù)，意思是在 history 記錄中向前或者后退多少步，類似window.history.go(n)

router.push(location)

想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

router.replace(location)

跟 router.push很像，唯一的不同就是，它不會向 history添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的history記錄。

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

VUE復習筆記29（vue-router詳解基礎(chǔ)）

VUE復習筆記29（vue-router詳解基礎(chǔ)）

安裝

介紹

功能介紹

入門

route-link

＃HTML

動態(tài)路由匹配

對params更改作出反應

高級匹配模式

匹配優(yōu)先級

嵌套路由

程序化導航

操作History

思考

router.go(n)

router.push(location)

router.replace(location)

相關(guān)閱讀更多精彩內(nèi)容

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

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

VUE復習筆記29（vue-router詳解基礎(chǔ)）

安裝

介紹

功能介紹

入門

route-link

＃HTML

動態(tài)路由匹配

對params更改作出反應

高級匹配模式

匹配優(yōu)先級

嵌套路由

程序化導航

操作History

思考

router.go(n)

router.push(location)

router.replace(location)

相關(guān)閱讀更多精彩內(nèi)容

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

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