Vue.js Routing Component Vue-router use method _javascript skills

Using Vue.js + Vue-router to create a single page application is very simple. Just configure the component and route map, and then tell Vue-router where to render it.

Basic examples of common methods:

<! DOCTYPE html>  

Second, the block mechanism programming basic example, take in Vue-cli the use method for example

Installing the vue-router plugin

# NPM Install Vue-router--save-dev

Under the Components folder under the SRC folder, create a new Foo.vue, Bar.vue two components, and write the following in the Foo component

<template>
 <div>foo</div>
</template>

Write the following in the Bar.vue component

<template>
 <div>bar</div>
</template>

Open the App.vue file under the SRC folder and modify the code to

<template>
 <div id= "app" >
 <router-view
 class= "View"
 keep-alive
 Transition
 transition-mode= "out-in" >
 </router-view>
 </div>
</template >

Here, use Router-view to load the newly created two pages here, modify the Main.js file under the SRC folder

Import Vue from ' Vue ' to '
import App from './app '
//reference Routing plug-in
import vuerouter from ' vue-router '

//using Routing Plug-ins
Vue.use (Vuerouter)

//Import component 
import Foo from './components/foo '
import Bar from './components/bar '

Const ROUTES = [
 {path: '/foo/', Component:foo},
 {path: '/bar/', Component:bar},
]

//using Routing rules 
   const router = new Vuerouter ({
 routes
})
//Load Routing rule
new Vue ({
 router,
 el: ' #app ',
 render:h => H (App)
})

Then run the npm run dev to see how it works.

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.