昨日はVUEフレーム、要素、UI、VUE-ルータ持っている技術を使用して、ラインシステムのフロントエンドに自宅で自分自身を作っ
:ポータルHTTPS://github.com/liyang1234を...
次のようにページの効果は次のとおりです。
前記ルータの設定ファイルとエントリファイルのWebPACKのmain.jsの使用は、index.jsのルータは、次のとおりです。
使用ルータ
公式の例
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
- ルータ・リンクタグ:ジャンプリンクは、=「」属性が必要とされるために、二重引用符の内容は、JSファイルに定義されている私たちの次のルーティングパスです。
- ルータビュータグ:表示領域当社のコンポーネントと一致するように、
ルータリンクプロパティの一部
//to属性 string|object
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
//replace属性 true|false 不留下 history 记录。
<router-link to="home" replace>Home</router-link>
//append属性 true|false 追加路径
<router-link to="home" append >Home</router-link>
//tag属性 string 设置渲染标签
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>
//active-class 属性 string 激活时使用的 CSS 类名
// 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')
// 现在,应用已经启动了!
JavaScriptファイルには、実行する主なものである:
ルートというルートリストを定義します。ルータとルータのコンフィギュレーションインスタンス、そのルータを作成します。ルート・インスタンスを作成し、マウントします。
これらは、単に最も簡単な方法でVUE-ルータを使用するために私達に教えています。しかし、実際の開発プロセスは、私たちの最初のVUEの部品は明らかに単純な単一のファイルが使用されますVUEのコンポーネントので、テンプレートテンプレートだけではありません。
第二に、我々は通常、<ルータビュー>範囲は、彼らが今のようではなく、ページ全体で期待されますこれは、いくつかの見苦しいナビゲーションはデフォルトの<ルータビュー>の良い定義を必要とするページ、上に存在されたコンテンツが表示しました。
それは単一ページのアプリケーション(SPA)であるので、その後、プロジェクト全体は、次の3つの文書が必要でありました:
htmlファイル:index.htmlを
エントリのjsファイルときのWebPACKパッケージ:main.js
ぶら下げの他の構成要素としてのA VUEコンポーネント根、過負荷ポイント:app.vue
VUE VUE-CLIによって生成WebPACKのパッケージ化商品
npm install webpack -g
npm install vue-cli -g
//打开要创建的项目路径目录,创建项目
vue init webpack-simple <项目名>
cd <项目名>
npm install vue-router --save
npm run dev
このようなプロジェクトを生成:
次の2つのファイルで新しいコンポーネントVUE index.vueとhello.vue
//index.vue
<template>
<div>
<h2>Index</h2>
<hr>
<p>{{sContent}}</p>
</div>
</template>
<script>
export default{
data(){
return {
sContent:"This is index components"
}
}
}
</script>
//hello.vue
<template>
<div>
<h2>Hello Vue.js</h2>
<hr/>
<p>{{sContent}}</p>
</div>
</template>
<script>
export default{
data(){
return {
sContent:"This is hello components"
}
}
}
</script>
修正main.jsファイル
//引入并安装vue-router插件
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//引入index.vue和hello.vue组件
import App from './App.vue';
import index from './components/index.vue';
import hello from './components/hello.vue';
//定义路由
const routes = [
{path:'/',component:App},
{ path: '/index', component: index },
{ path: '/hello', component: hello }
]
//创建 router 实例,然后传 routes 配置
const router=new VueRouter({
routes
});
//创建和挂载根实例。通过 router 配置参数注入路由,从而让整个应用都有路由功能
new Vue({
el:"#app",
router
});
修正App.vue
<template>
<div>
![](./assets/logo.png)
<h1>{{msg}}</h1>
<ul>
<router-link to='/index' tag='li'><a href="/index">Index</a></router-link>
<router-link to='/hello' tag='li'><a href="/hello">Hello</a></router-link>
</ul>
</div>
</template>
修正index.htmlを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-webpack-simple</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="/dist/build.js"></script>
</body>
</html>
次のように動作した結果は以下のとおりです。