1. vue-router の導入: vue-router を検索し、vue-router の公式ドキュメントを開きます。
2. このプロジェクトは vue2 をベースに開発されているため、公式 Web サイトをバージョン v3.x に切り替え、npm インストール方法を選択して、ナビゲーション インストール ディレクトリに移動します。
インストールコマンドは以下の通り
npm install vue-router上記のコマンドは、適応された v3.x バージョンではなく、最新バージョンをインストールするため、@ メソッドを使用してバージョン番号を指定します。
npm install vue-router@版本号① Baidu npm を介して、npm で v3.x (vue-router 3) の最新バージョンを見つけることができます
②npm公式サイトでvue-routerと入力して最初の項目を検索・選択
③バージョンをクリックして、対応するバージョン番号を見つけます
上記の図から、v3.x の最新バージョン番号が 3.6.5 であることがわかり、vscode ターミナルを開いてインストールします
インストールコマンドは以下の通り、入力してEnterを押すとインストールされます
npm install [email protected]ダウンロード完了
package.json を開いて確認します
3. vue-router の構成: src ディレクトリに新しいルーター フォルダーを作成し、ルーター フォルダーに新しい index.js ファイルを作成します。
vue-router の公式ドキュメントを開き、モジュラー プロジェクトで使用する場合は、 Vue.use() ルーティング機能を明示的にインストールする必要があることを確認します。
関連するコードは次のとおりです。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)上記のコードを router フォルダーの下の index.js ファイルに構成します。
Getting started-javascript で詳しく説明されている公式ドキュメントを開きます。
関連するコードは次のとおりです。
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！4. JavaScript の指示に従って、まず src フォルダーの下に新しいビュー フォルダーを作成し、.vue コンポーネントを登録します。
①コンポーネント登録完了後、routerフォルダ配下のindex.jsで参照
コードは以下のように表示されます:
//创建路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'②地図のルートとコンポーネント
コードは以下のように表示されます:
//将路由与组件进行映射
const routes = [
{ path: '/home', component: Home},
{ path: '/user', component: User}
]③ルーターインスタンスの作成
コードは以下のように表示されます:
//创建 router 实例
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})④ルーターインスタンスを外部に公開する
コードは以下のように表示されます:
//将当前router实例对外进行暴露
export default router
ルーター ファイルの下にある index.js の完全なコードは次のとおりです。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//创建路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'
//将路由与组件进行映射
const routes = [
{ path: '/home', component: Home },
{ path: '/user', component: User }
]
//创建 router 实例
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
//将当前router实例对外进行暴露
export default router
5. ルート インスタンスを作成してマウントし、src ファイルの下の main.js を開き、ルーターをインポートします。
現在のインスタンスにマウントする
main.js ファイルの完全なコードは次のとおりです。
import Vue from 'vue'
import App from './App.vue'
//全局引入element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入router
import router from './router'
//对element ui进行全局注册
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
6. ルーティング出口を一致させ、App.vue ファイルでコンポーネントをレンダリングします
コードは以下のように表示されます:
①マッチルーティング出口
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>②App.vueの完全なコード:
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!-- <el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row> -->
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
//import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
// components: {
// HelloWorld
// }
}
</script>
<style>
</style>
7. 検証のためにプロジェクトを開始する
プロジェクトエラーが見つかりました
解決策: vue.config.js を開き、lintOnSave: false; を追加します。
保存して再実行します [最初に vscode を閉じて、ターミナルで npm run serve コマンドを再入力すると、操作が失敗することがあります]
初回エントリーページは以下の通りです。
URLアドレスの変更（ユーザーやホームの追加）による経路切り替えを実現
ここまでで、vue-router コードの構成は完了です