vue-router

  • 示例
// 0. 如果使用模塊化機(jī)制編程，導(dǎo)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter)

// 1. 定義 (路由) 組件。
// 可以從其他文件 import 進(jìn)來(lái)
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是
// 通過(guò) Vue.extend() 創(chuàng)建的組件構(gòu)造器，
// 或者，只是一個(gè)組件配置對(duì)象。
// 我們晚點(diǎn)再討論嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過(guò)先這么簡(jiǎn)單著吧。
const router = new VueRouter({
  routes // (縮寫) 相當(dāng)于 routes: routes
})

// 4. 創(chuàng)建和掛載根實(shí)例。
// 記得要通過(guò) router 配置參數(shù)注入路由，
// 從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現(xiàn)在，應(yīng)用已經(jīng)啟動(dòng)了！
  • router-link && router-view
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
    <!-- 通過(guò)傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>
  • 動(dòng)態(tài)路由匹配
const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開(kāi)頭
    { path: '/user/:id', component: User }
  ]
})

//一個(gè)“路徑參數(shù)”使用冒號(hào) : 標(biāo)記。當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到 this.$route.params，可以在每個(gè)組件內(nèi)使用。于是，我們可以更新 User 的模板，輸出當(dāng)前用戶的 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
  • 響應(yīng)路由參數(shù)變化
//當(dāng)使用路由參數(shù)時(shí)，例如從 /user/foo 導(dǎo)航到 /user/bar，原來(lái)的組件實(shí)例會(huì)被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過(guò)，這也意味著--組件的生命周期鉤子不會(huì)再被調(diào)用--。
//復(fù)用組件時(shí)，想對(duì)路由參數(shù)的變化作出響應(yīng)的話，你可以簡(jiǎn)單地 watch (監(jiān)測(cè)變化) $route 對(duì)象：
const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對(duì)路由變化作出響應(yīng)...
    }
  }
}
||
const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
    // 路由守衛(wèi)
  }
}
  • children
  const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當(dāng) /user/:id/profile 匹配成功，
          // UserProfile 會(huì)被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當(dāng) /user/:id/posts 匹配成功
          // UserPosts 會(huì)被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})
  • 編程式導(dǎo)航--js改變頁(yè)面路由
    • router.push(location, onComplete?, onAbort?)
// 字符串
router.push('home')

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

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

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

//**如果提供了 path，params 會(huì)被忽略**.上述例子中的 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

//同樣的規(guī)則也適用于 router-link 組件的 to 屬性
//如果目的地和當(dāng)前路由相同，只有參數(shù)發(fā)生了改變 (比如從一個(gè)用戶資料到另一個(gè) /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 來(lái)響應(yīng)這個(gè)變化 (比如抓取用戶信息)
  • router.replace(location, onComplete?, onAbort?)
    • 跟 router.push 很像，唯一的不同就是，它不會(huì)向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。
  • router.go(n)
//這個(gè)方法的參數(shù)是一個(gè)整數(shù)，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)。

// 在瀏覽器記錄中前進(jìn)一步，等同于 history.forward()
router.go(1)

// 后退一步記錄，等同于 history.back()
router.go(-1)

// 前進(jìn) 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

//router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 實(shí)際上它們確實(shí)是效仿 window.history API 的。
  • 命名路由
const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

//要鏈接到一個(gè)命名路由，可以給 router-link 的 to 屬性傳一個(gè)對(duì)象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
//這跟代碼調(diào)用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})
//這兩種方式都會(huì)把路由導(dǎo)航到 /user/123 路徑。
  • 命名視圖
    • 有時(shí)候想同時(shí) (同級(jí)) 展示多個(gè)視圖，而不是嵌套展示.可以在界面中擁有多個(gè)單獨(dú)命名的視圖，而不是只有一個(gè)單獨(dú)的出口。如果 router-view 沒(méi)有設(shè)置名字，那么默認(rèn)為 default
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

//一個(gè)視圖使用一個(gè)組件渲染，因此對(duì)于同個(gè)路由，多個(gè)視圖就需要多個(gè)組件。確保正確使用 components 配置 (帶上 s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})
  • 重定向 redirect
//從 /a 重定向到 /b
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

/重定向的目標(biāo)也可以是一個(gè)命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

// 甚至是一個(gè)方法，動(dòng)態(tài)返回重定向目標(biāo)：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目標(biāo)路由 作為參數(shù)
      // return 重定向的 字符串路徑/路徑對(duì)象
    }}
  ]
})

//注意導(dǎo)航守衛(wèi)并沒(méi)有應(yīng)用在跳轉(zhuǎn)路由上，而僅僅應(yīng)用在其目標(biāo)上。
  • 別名 alias
    • “重定向”的意思是，當(dāng)用戶訪問(wèn) /a時(shí)，URL 將會(huì)被替換成 /b，然后匹配路由為 /b
    • /a 的別名是 /b，意味著，當(dāng)用戶訪問(wèn) /b 時(shí)，URL 會(huì)保持為 /b，但是路由匹配則為 /a，就像用戶訪問(wèn) /a 一樣
const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})
  • 路由組件傳參
//在組件中使用 $route 會(huì)使之與其對(duì)應(yīng)路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。

//使用 props 將組件和路由解耦：

//取代與 $route 的耦合(只能通過(guò) :id 傳遞參數(shù))
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

//通過(guò) props 解耦

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 對(duì)于包含命名視圖的路由，你必須分別為每個(gè)命名視圖添加 `props` 選項(xiàng)：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

//可以在任何地方使用該組件，使得該組件更易于重用和測(cè)試

--布爾模式
//如果 props 被設(shè)置為 true，route.params 將會(huì)被設(shè)置為組件屬性。
--對(duì)象模式
//如果 props 是一個(gè)對(duì)象，它會(huì)被按原樣設(shè)置為組件屬性。當(dāng) props 是靜態(tài)的時(shí)候有用。

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})
--函數(shù)模式
//你可以創(chuàng)建一個(gè)函數(shù)返回 props。這樣你便可以將參數(shù)轉(zhuǎn)換成另一種類型，將靜態(tài)值與基于路由的值結(jié)合等等。

const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})
//URL /search?q=vue 會(huì)將 {query: 'vue'} 作為屬性傳遞給 SearchUser 組件。

//請(qǐng)盡可能保持 props 函數(shù)為無(wú)狀態(tài)的，因?yàn)樗粫?huì)在路由發(fā)生變化時(shí)起作用。如果你需要狀態(tài)來(lái)定義 props，請(qǐng)使用包裝組件，這樣 Vue 才可以對(duì)狀態(tài)變化做出反應(yīng)。
  • html5 history模式

    • vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載。

    • 如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面。

    • 后端例子

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
//當(dāng)你使用 history 模式時(shí)，URL 就像正常的 url

//不過(guò)這種模式要玩好，還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶端應(yīng)用，如果后臺(tái)沒(méi)有正確的配置，當(dāng)用戶在瀏覽器直接訪問(wèn) http://oursite.com/user/id 就會(huì)返回 404，這就不好看了。

//所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面

導(dǎo)航守衛(wèi)---（導(dǎo)航表示路由正在發(fā)生變化）

  • 導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會(huì)植入路由導(dǎo)航過(guò)程中：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。
  • 參數(shù)或查詢的改變并不會(huì)觸發(fā)進(jìn)入/離開(kāi)的導(dǎo)航守衛(wèi)
// 全局前置守衛(wèi)--router.beforeEach

      const router = new VueRouter({ ... })

      router.beforeEach((to, from, next) => {
        // ...
      })

      //當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中。

      //每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：

      //to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象

      //from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由

      //next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

      //next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。

      //next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動(dòng)或者瀏覽器后退按鈕)，那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。

      //next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向 next 傳遞任意位置對(duì)象，且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項(xiàng)以及任何用在 router-link 的 to prop 或 router.push 中的選項(xiàng)。

      //next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過(guò)的回調(diào)。

      //確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved。

//  全局解析守衛(wèi)--router.beforeResolve
      //這和 router.beforeEach 類似，區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用
//  全局后置鉤子--router.afterEach
      //可以注冊(cè)全局后置鉤子，然而和守衛(wèi)不同的是，這些鉤子不會(huì)接受 next 函數(shù)也不會(huì)改變導(dǎo)航本身：

      router.afterEach((to, from) => {
        // ...
      })
//  路由獨(dú)享守衛(wèi)--beforeEnter
      //可以在路由配置上直接定義 beforeEnter 守衛(wèi)：

      const router = new VueRouter({
        routes: [
          {
            path: '/foo',
            component: Foo,
            beforeEnter: (to, from, next) => {
              // ...
            }
          }
        ]
      })
//  組件內(nèi)守衛(wèi)--可以在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)：

    //beforeRouteEnter
    //beforeRouteUpdate (2.2 新增)
    //beforeRouteLeave

    const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
        // 不！能！獲取組件實(shí)例 `this`
        // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
      },
      beforeRouteUpdate (to, from, next) {
        // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
        // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
        // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
        // 可以訪問(wèn)組件實(shí)例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
        // 可以訪問(wèn)組件實(shí)例 `this`
      }
    }

    //beforeRouteEnter 守衛(wèi) 不能 訪問(wèn) this，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒(méi)被創(chuàng)建。

    //不過(guò)，你可以通過(guò)傳一個(gè)回調(diào)給 next來(lái)訪問(wèn)組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。

    beforeRouteEnter (to, from, next) {
      next(vm => {
        // 通過(guò) `vm` 訪問(wèn)組件實(shí)例
      })
    }

    //注意 --**beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)。**--對(duì)于 beforeRouteUpdate 和 beforeRouteLeave 來(lái)說(shuō)，this 已經(jīng)可用了，所以不支持傳遞回調(diào)，因?yàn)闆](méi)有必要了。

    beforeRouteUpdate (to, from, next) {
      // just use `this`
      this.name = to.params.name
      next()
    }
    //這個(gè)離開(kāi)守衛(wèi)通常用來(lái)禁止用戶在還未保存修改前突然離開(kāi)。該導(dǎo)航可以通過(guò) next(false) 來(lái)取消。

    beforeRouteLeave (to, from , next) {
      const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
      if (answer) {
        next()
      } else {
        next(false)
      }
    }
  • 完整的導(dǎo)航解析流程
    • 導(dǎo)航被觸發(fā)。
    • 在失活的組件里調(diào)用離開(kāi)守衛(wèi)。
    • 調(diào)用全局的 beforeEach 守衛(wèi)。
    • 在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。
    • 在路由配置里調(diào)用 beforeEnter。
    • 解析異步路由組件。
    • 在被激活的組件里調(diào)用 beforeRouteEnter。
    • 調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。
    • 導(dǎo)航被確認(rèn)。
    • 調(diào)用全局的 afterEach 鉤子。
    • 觸發(fā) DOM 更新。
    • 用創(chuàng)建好的實(shí)例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。
  • 路由元信息 meta $route.matched
    • 定義路由的時(shí)候可以配置 meta 字段：
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})
//稱呼 routes 配置中的每個(gè)路由對(duì)象為 路由記錄。路由記錄可以是嵌套的，因此，當(dāng)一個(gè)路由匹配成功后，他可能匹配多個(gè)路由記錄
//一個(gè)路由匹配到的所有路由記錄會(huì)暴露為 $route 對(duì)象 (還有在導(dǎo)航守衛(wèi)中的路由對(duì)象) 的 $route.matched 數(shù)組。因此，我們需要遍歷 $route.matched 來(lái)檢查路由記錄中的 meta 字段。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 確保一定要調(diào)用 next()
  }
})

//<router-view> 是基本的動(dòng)態(tài)組件，所以我們可以用 <transition> 組件給它添加一些過(guò)渡效果：

<transition>
  <router-view></router-view>
</transition>
  • 數(shù)據(jù)獲取
    • 導(dǎo)航完成后獲取數(shù)據(jù)
      當(dāng)你使用這種方式時(shí)，我們會(huì)馬上導(dǎo)航和渲染組件，然后在組件的 created 鉤子中獲取數(shù)據(jù)。這讓我們有機(jī)會(huì)在數(shù)據(jù)獲取期間展示一個(gè) loading 狀態(tài)，還可以在不同視圖間展示不同的 loading 狀態(tài)。
<template>
  <div class="post">
    <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>
export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 組件創(chuàng)建完后獲取數(shù)據(jù)，
    // 此時(shí) data 已經(jīng)被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有變化，會(huì)再次執(zhí)行該方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}
  • 在導(dǎo)航完成前獲取數(shù)據(jù)
    通過(guò)這種方式，我們?cè)趯?dǎo)航轉(zhuǎn)入新的路由前獲取數(shù)據(jù)。我們可以在接下來(lái)的組件的 beforeRouteEnter 守衛(wèi)中獲取數(shù)據(jù)，當(dāng)數(shù)據(jù)獲取成功后只調(diào)用 next 方法
export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改變前，組件就已經(jīng)渲染完了
  // 邏輯稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • 前言 vue-router是什么：是vue.js官方的路由管理器和vue.js的核心深度的集成，讓開(kāi)發(fā)者更加簡(jiǎn)單的...
    GUAN_one閱讀 3,879評(píng)論 0贊 2
  • 學(xué)習(xí)目的 學(xué)習(xí)Vue的必備技能，必須 熟練使用 Vue-router，能夠在實(shí)際項(xiàng)目中運(yùn)用。 Vue-rout...
    _1633_閱讀 92,942評(píng)論 3贊 58
  • 介紹 vue-router是一個(gè)vue插件。其實(shí)質(zhì)是在location.hash、location.replace...
    AmazRan閱讀 1,678評(píng)論 0贊 6
  • 導(dǎo)航守衛(wèi) 導(dǎo)航表示路由正在發(fā)生改變。vue-router提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種...
    oWSQo閱讀 743評(píng)論 0贊 0
  • 《秋窗風(fēng)雨夕》-林黛玉 秋花慘淡秋草黃，耿耿秋燈秋夜長(zhǎng)。 已覺(jué)秋窗秋不盡，那堪風(fēng)雨助凄涼。 助秋風(fēng)雨來(lái)何速，驚破秋...
    米鹿米鹿吖閱讀 1,054評(píng)論 17贊 26

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