Vue.js（vue-router）-tutorial js-php.cn

Vue.js（vue-router）

高洛峰

Lepaskan： 2016-12-03 09:23:00

asal

1540 orang telah melayarinya

vue中vue-router的使用:

main.js如何配置(es6的写法):在引用之前记得先 npm 下所需要的vue

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import Router from &#39;vue-router&#39;
import Resource from &#39;vue-resource&#39;
//import VueTouch from &#39;vue-touch&#39;
var VueTouch = require(&#39;vue-touch&#39;)
 
//引入home页面
import homepage from &#39;./page/home.vue&#39;
//引入test页面
import test from &#39;./page/test.vue&#39;
 
Vue.use(Router);
Vue.use(Resource);
Vue.use(VueTouch);
 
var router = new Router({
 abstract: true,
 hashbang: false
});
//实现页面跳转
router.map({
 &#39;/home&#39;:{
 component:homepage
 }, 
 &#39;/test&#39;:{
 component:test
 }, 
  
})
 
router.start(App, &#39;#app&#39;)
// router.go(&#39;test&#39;); 默认直接跳转到 test 页面

Salin selepas log masuk

index.html中引入app.vue和build.js

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>vue.js学习笔记(2)</title>
 <link rel="stylesheet" type="text/css" href="style/bootstrap.css">
</head>
<body>
 <!--此处注意加载顺序,需要先加载dom在加载js,否则会&#39;Cannot find element: #app&#39;-->
 <p id=&#39;app&#39;></p>
 <script src="static/build.js"></script>
</body>
</html>
<style>
body {
}
</style>

Salin selepas log masuk

app.vue引入router

<template>
<p class=&#39;all-container&#39;>
 <p class="public-content">我是公共页面</p>
 <p class=&#39;menu&#39;>
 <ul class="list">
 <li><a v-link=&#39;"/home"&#39;>home页面</a></li>
 <li><a v-link=&#39;"/test"&#39;>test页面</a></li>
 </ul>
 </p>
 <router-view transition=&#39;animation&#39; class=&#39;container&#39; keep-alive></router-view>
</p>
</template>

Salin selepas log masuk

home.vue

<template>
<p class="home">
 <p class="htmleaf-content">
 我是home页面的内容
 </p>
</p>
</template>

Salin selepas log masuk

test.vue

<template>
<p class="test">
 <p class="test-content">
我是test页面的内容
</p>
</p>
 
</template>

Salin selepas log masuk

最后用webpack 将程序打包.关于webpack大家可以看看

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Vue.js（vue-router）