This article series: vue2.0 together in the sea of meng forced deeper (http://leenty.com/tags/vuejs/)

We agreed to sink together, so we continue to sink

The dependencies required for VUe2.0 were installed in the previous article

So the next thing



Because the final page generated by vue looks like a static page (for static pages here some use to steal chicken, no matter how you, anyway I have shown a weird smile 😏, and paste aProject address of Vue2.0 DemoIf you are happy, you can add a star), but it is actually a SPA(single page app).

That’s right! It’s a SPA

As a SPA, of course there are different places

The difference between SPA and traditional web pages is that SPA has a front end route to simulate page hopping. Of course, this is one of the many differences. This article only talks about the front end route. Vue + Vue-Router is amazing, and the speed of page jumps is amazing. Not only is the user experience improved, but as a developer, after using MVVM frameworks like Vue, React, etc. You won’t want to go back to jQuery.

I’ve been doing it for a long time, but now I’m going to start coding!

Ok, open the Vue project with your own little editor (I’m using Sublime)

You can see that the project directory looks something like this



By the way, this sublime theme is fine if you likeCheck out this article)

It doesn’t matter if you find a few files missing from your directory, the next thing you need to do is create those files.

As a SPA, the first step is to have routing

So if you look at the directory picture you can see the file main.js, yes this is the entry to the program and this is what the file says

import Vue from 'vue'
import router from './router'
import App from './App'
/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')Copy the code

The main. Js address uses ES6 syntax, using import to import the package. There are also two files, router.js and app.vue. js, the suffix can be omitted. In fact, the suffix vue can also be omitted, I suggest or write, if you encounter two files with the same name will be awkward.

Ok, this router.js is the route outlet, app. vue is the template file that already exists in the directory, and your interface starts from there. With packages imported, you can start setting up routes and mount templates

By the way, you can see that in new Vue() you pass in an object, but that object is not a key-value pair, that’s right, that’s a syntax in ES6, when the variable name referenced is the same as the key name, you can abbreviate it like this if that’s what it used to be

New Vue({router: router, render: h => h(App)}).$mount(' App ') {render: h => h(App)}).$mount(' App ') Render: (h) => {return h(App)}}).$mount(' App ')Copy the code

PS: The new syntax of ES6 is now available online, and I will post a version of the common syntax later

Now create it in the SRC directoryrouter.jsfile

It went like this:

Import Vue from 'Vue' import VueRouter from 'vue-router' import routes from './routes' // tell Vue to use router Vue.use(VueRouter) /* eslint-disable no-new */ / instantiate router const router = new VueRouter({mode: 'hash', / / set the routing mode optional value: "hash" | | "history" "abstract," default "hash" linkActiveClass: 'u-link--Active', // this is the class // base when the link is Active: }) // Export the router object export default routerCopy the code

This is arouter.jsaddress

Two packages are introduced herevue.vue-routerAnd one that contains the routing setroutes.jsfile

The logic of the whole file is to useVue.use()Method tells vUE that we used routing

Then export the routing object in a straightforward manner



At this timemain.jsCan accept the route object exported from here and mount it to the VUE object

Create it in the SRC directoryroutes.jsfile

routes.jsIs the file used to place the routing collection

In fact, the route set can be written inrouter.jsWhy don’t you put them together here?

Because when the set of routes gets big, if I still write inrouter.jsIt will be crowded and not easy to read

So it’s recommended to write it out separately.

You can also create a template file for the route (.vueFile, which I call a template file),Article.vueandHome.vue

You can call your template file whatever you want, so you can see that you have all the files in this picture, right

So before writing the routes.js file, you need to write the content of the two templates (otherwise it is not clear whether they will succeed later, 23333).

Ok, paste the contents of home.vue




Copy the code

There is no problem with this, but when I look at my code carefully, I find that PUG is used for HTML and STYLus is used for CSS. In fact, it is possible to use puG and stylus without them, but puG and stylus have a clear writing structure. If you want to use them, please open your terminal and add several packages to the project

npm i pug stylus stylus-loader -DCopy the code

The template doesn’t need to be too complicated, as long as it has words to display. Vue is the same as Article

Tips: It is recommended to have a root element in the template, like the one here. Home is the root element, so it is less confusing and the structure is clear

Once you’ve written the template, you can start writingroutes.jsthe

Post the code first!

Import Home from './components/ home. vue' import Article from './components/Article. Vue '// write route collection const Routes = [{name: 'Home', / / routing, this field is optional path: '/', / / routing path, here is the root path so is'/' component: Home / / template}, {name: / / these are used for 'Article', path: '/ Article', Component: Article}] export default routesCopy the code

Then the file address Finally deduced routing collection (routes) after can be in the router. Use js So, in front of the router. The routes in the js.

Now for the last step, go toApp.vueAdd route to

The code is as follows:




Copy the code

Address good, so far on the completion of the route to build and use.