Vue.js the next day to learn notes (Vue-router) _javascript skills

Use of Vue-router in Vue:

Main.js How to Configure (ES6): Before quoting, remember to have the required Vue under NPM

Import Vue from ' Vue ' import App from '
./app.vue '
import Router from ' vue-router '
import Resource from ' Vue-re SOURCE '
//import vuetouch from ' Vue-touch '
var Vuetouch = require (' Vue-touch ')

//Introduce home page
import Homepage from './page/home.vue '
//Introduce test page
import test from './page/test.vue '

vue.use (Router);
Vue.use (Resource);
Vue.use (Vuetouch);

var router = new Router ({
 abstract:true,
 hashbang:false
});
Implementation page Jump
router.map ({
 '/home ': {
 component:homepage
 }, 
 '/test ': {
 component:test
 },

router.start (App, ' #app ')
//Router.go (' Test '), direct jump to test page by default

Introduction of App.vue and Build.js in index.html

<! DOCTYPE html>
 
 

App.vue introduced into router

<template>
<div class= ' All-container ' >
 <div class= ' public-content ' > I am the public page </div>
 <div class= ' menu ' >
 <ul class= "list" >
 <li><a v-link= ' "/home" ' >home page </a ></li>
 <li><a v-link= ' "/test" >test page </a></li>
 </ul>
 </ div>
 <router-view transition= ' animation ' class= container ' keep-alive></router-view> '
< /div>
</template>

Home.vue

<template>
<div class= "Home" >
 <div class= "htmleaf-content" >
 I am the content
 of the home page </div>
</div>
</template>

Test.vue

<template>
<div class= "Test" >
 <div class= "test-content" >
I am the content of the test page
</ div>
</div>

</template>

Finally, the program is packaged with Webpack. About Webpack everybody can see

vue.js--60 minutes Webpack Project Templates Quick Start

Webpack Home

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.