Vue3中的Vue Router初探

時間 2020-05-09

標籤 vue3 vue router 初探简体版

原文原文鏈接

對於大多數單頁應用程序而言，管理路由是一項必不可少的功能。隨着新版本的Vue Router處於Alpha階段，咱們已經能夠開始查看下一個版本的Vue中它是如何工做的。javascript

Vue3中的許多更改都會稍微改變咱們訪問插件和庫的方式，其中包括Vue Router。咱們將結合使用Alpha版本的Vue Router和當前的Vue3 Alpha版本進行研究。html

本文告訴你如何將Vue Router添加到Vue3項目中，並有一個很好的小例子！前端

設置

首先，咱們將使用由Evan You 發佈的Vue3 Webpack預覽版。vue

讓咱們使用 git clone https://github.com/vuejs/vue-next-webpack-preview.git 克隆倉庫。java

而後，要將vue-router alpha添加到咱們的項目中，咱們要修改 package.json 文件。webpack

在咱們的依賴關係中，咱們想添加如下版本的vue-routergit

"dependencies": {
  "vue": "^3.0.0-alpha.10",
  "vue-router": "4.0.0-alpha.4"
}

如今，咱們終於能夠從命令行運行 npm install 來安裝全部依賴項。github

咱們最終要作的設置是實際建立你的路由文件以及一些映射到它的視圖。web

在 src/ 文件夾中，咱們將添加三個文件。面試

router/index.js
views/Home.vue
views/Contact.vue

咱們的路由器文件將包含咱們的路由器，而且咱們的 Home/Contact 視圖將只輸出一個單詞，以便咱們瞭解發生了什麼。

創建路由

一切準備就緒，讓咱們開始使用Vue Router！

簡而言之，Vue Router的Vue3版本的主要區別在於咱們必須導入新方法才能使代碼正常工做。其中最重要的是createRouter 和 createWebHistory。

在咱們的 router/index.js 文件中，讓咱們導入這兩個方法以及前面的兩個視圖。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Contact from '../views/Contact.vue'

接下來，咱們要作的是使用createWebHistory方法建立一個routerHistory對象。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Contact from '../views/Contact.vue'

const routerHistory = createWebHistory()

在此以前，咱們能夠只輸入 mode: history 來從哈希模式切換到 history 模式，可是如今咱們使用 history: createWebHistory() 來實現這一點。

接下來，咱們實際上可使用 createRouter 建立路由器，它接受一個對象，咱們但願傳遞 routerHistory 變量以及兩個路由的數組。

const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

最後，讓咱們將路由導出。

export default router

如你所見，它仍然與Vue2很是類似。可是，經過全部這些更改，能夠更好地支持Typescript和進行優化，所以熟悉新方法是很不錯的。

使用vue路由器

如今咱們的Vue Router文件已經設置好了，咱們能夠將其添加到項目中了。之前，咱們能夠導入它並Vue.use(router)，但這在Vue3中不同。

在 main.js 文件中，你會看到咱們正在使用Vue中的 createApp 方法來實際建立咱們的項目。在默認項目中，它連接 createApp 和 mount 方法。

const app = createApp(App)

app.mount('#app')

而後，在掛載咱們的應用程序以前，咱們想告訴它使用路由器文件。

import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

最後，在咱們的App.vue文件中，讓咱們實際顯示咱們的 router-view 並提供一些 router-link，以便咱們可以四處導航。

<template>
  <div id='root'>
    <img src='./logo.png' />
    <div id='nav'>
      <router-link to='/'> Home</router-link>
      <router-link to='/contact'>Contact </router-link>
    </div>
    <router-view />
  </div>
</template>

因此如今，若是咱們單擊一下，咱們將看到實際上能夠在兩個頁面之間導航！

可是，若是咱們嘗試直接進入咱們的 /contact 路由，那將不起做用！咱們遇到某種錯誤。

幸運的是，這是能夠很是快速的用webpack修復。

在咱們的 webpack.config.js 文件中，咱們但願經過更改配置使devServer可以使用 history api，使它看起來像這樣。

devServer: {
    inline: true,
    hot: true,
    stats: 'minimal',
    contentBase: __dirname,
    overlay: true,
    historyApiFallback: true
}

如今，若是咱們直接導航到 /contact 路由，那麼一切都應該正常運行

總結

咱們已成功將vue-router添加到咱們的Vue3項目中。其餘大多數功能（例如導航守衛，處理滾動條）和這些功能大體相同。

這是本教程最終Github倉庫的連接。若是您想在Vue3測試版中安裝vue-router，這是一個很好的模板代碼。

文章首發《前端外文精選》微信公衆號

繼續閱讀其餘高贊文章

更多...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。