Vue.js（vue-router）-JS Tutorial-php.cn

Vue.js（vue-router）

高洛峰

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

Original

1540 people have browsed it

Usage of vue-router in vue:

Vue.js（vue-router）

main.js How to configure (es6 writing method): Before quoting, remember to introduce it into the required 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 页面

Copy after login

index.html under npm app.vue and 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>

Copy after login

app.vue introduces 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>

Copy after login

home.vue

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

Copy after login

test.vue

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

Copy after login

Finally, use webpack to package the program. You can read about webpack

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Vue.js（vue-router）