using Vue.js + vue-router to create a single-page app is very simple, just configure the component and route map, and then tell Vue-router where to render. This article and everyone to share is Vue-router related use method, hope to everybodyLearning Vue.jshelpful.
A basic example of a common way:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>vue-router How to use </title>
<body>
<div id= "app" >
<p>
<!--Use the Router-link component to navigate.
<!--Specify the link by passing in the ' to ' property.
<!--<router-link> will be rendered as a ' <a> ' tab by default --
<router-link to= "/foo" >go to foo</router-link>
<router-link to= "/bar" >go to bar</router-link>
</p>
<!--Route Exit --
<!--the components that the route matches to will be rendered here--
<router-view></router-view>
</div>
<script src= "Https://unpkg.com/vue/dist/vue.js" ></script>
<script src= "Https://unpkg.com/vue-router" ></script>
<script>
//1. Define (route) components.
//Can import from other documents
Const FOO = {Template: ' <div>foo</div> '}
Const Bar = {Template: ' <div>bar</div> '}
//2. Defining Routes
//each route should map a component. Where "component" can be
//The Component Builder created by Vue.extend (),
//or, just a component configuration object.
const ROUTES = [
{path: '/foo ', Component:foo},
{path: '/bar ', Component:bar}
]
//3. Create a router instance and pass ' routes ' configuration
Const ROUTER = new Vuerouter ({
routes//(abbreviation) equivalent to Routes:routes
})
//4. Create and mount the root instance.
//Remember to inject the route via the router configuration parameter,
//So that the entire application has routing capabilities
Const APP = new Vue ({
Router
}). $mount (' #app ')
//Now, the app has started!
</script>
</body>
two basic examples of block-based programming, using methods in VUE-CLI as an example
Installing the Vue-router plugin
# NPM Install vue-router--save-dev
Create a new Foo.vue, Bar.vue two component under the Components folder under the SRC folder, 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, modify the code to
<template>
<div id= "app" >
<router-view
class= "View"
keep-alive
transition
transition-mode= "out-in" >
</router-view>
</div>
</template>
here to use Router-view to load the newly created two pages here, modify the SRC folder under the Main.js file
import vue from ' Vue '
import App from './app '
//reference route plug-in
import vuerouter from ' Vue-router '
//Using the routing plug-in
vue.use (vuerouter)
//Introduction Components
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 rules
New Vue ({
router,
el: ' #app ',
render:h = h (App)
})
then run the NPM run dev to see the effect.
Source: Liu Ning personal blog
How does the Vue.js routing component Vue-router work?
