vue route (a)

"Vue.js different URL routing allows us to access different content.
Can achieve single-page Web applications with multiple views (single page web application, SPA) by Vue.js"
This is a direct copy from the Internet, we are creating vue project is an option, choose whether to install vuer-router Enter y or, if not so created at the command line to install it, would have a direct installation when you create, save a lot of trouble.
Not a reference to online success of chestnuts, I do not know what the reason is not the correct version, my version is 2.9.6, if you have a different version, errors may occur when referring to my dome.
Look at the online chestnut:


This is from the "rookie tutorial", at the beginning I saw was ignorant of, js script written in that file? The first figure of the code written in where? Later willing to open xx video tutorials, read it again and again, how do wrong. Not simply follow the tutorial to their own research about it.
First, it assumes that you have a routing plug-in installed.
First, create title.vue and title1.vue in the components file
title.vue content:

<Template> 
<div> If not for the return of Yi Jin, who wants to go into exile. </ div> 
</ Template> 
<Script>

 

title2.vue content:

<Template> 
<div> 
<br> 
your future will thank you now desperately
 </ div> 
</ Template>

 

The second step, open src / router / index.js

Router Import from  ' VUE-Router ' // default there, the introduction of routing 
Import the HelloWorld from  ' @ / Components / the HelloWorld ' // default, there's 
Import TITLE1 from  ' @ / Components / title ' ; // introduced just wrote component 
Import title2 from  ' @ / components / title2 ' ; // introduction means just write 
Vue.use (Router) 
Export default  new new Router ({
 // routes: [{}, {}] format is such that there is a default 
routes: [ 
{ 
path: ' / TITLE1 ', // same name introduced in the url browser is input, it should be understood backend 
Component: TITLE1 // above 
}, 
{ 
path: ' / title2 ' , 
Component: title2 
} 
] 
})

 

The third step is to save the contents of the above, open app.vue

<template>
<div id="app">
<img src="./assets/logo.png">
<router-link to="/title1">title</router-link>
<router-link to="/title2">title2</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'serif;
, Helvetica, Arial, sans-'Future-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

 

among them:

<-Link Router to = " / TITLE1 " > title </ Router-Link> 
<-Link Router to = " / title2 " > title2 </ Router-Link> 
These two lines are what we write, the other can be deleted, too It may change. 
* Router-link in the link target to indicate the route. So this value can be a string or a target position of the object described.

 

Finally, npm run dev then view the results, if they are not properly welcome message, explore together.
Conclusion: It may be a lot of colleagues have questions, I write are based.
No way, introduce myself, 2008 in the net back-end development so far experienced db, back-end, front-end write together, as is the front-end illiteracy, is quite tired when acting as the role of firefighters.

This year decided to use vue, found the front power is not enough, forced to learn about the night. You have a good front-end tutorials, data can be sent to me, I qq: 546170667, welcome harassment.