Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of the front and back end design of Vue routing, which is very detailed and has a certain reference value. Interested friends must read it!

First, the official website demo

Here have to complain about the official website, the writing is not clear, where to use is not clear, a few lines of code is light to explain the end of the matter, the rest of the things have to study, such as how HTML5 History API is going on. Here is another problem, if you want to make good use of vue, you must first master the basic knowledge, because vue's official website tutorials will not take care of these basic knowledge.

Let's take a look at the code on the official website:

Const NotFound = {template:'

Page not found

'} const Home = {template:'

Home page

'} const About = {template:'

About page

'} const routes = {' /': Home,'/ about': About} new Vue ({el:'# app', data: {currentRoute: _ window.location.pathname}, computed: {ViewComponent () {return routes [this.currentRoute] | | NotFound}}, render (h) {return h (this.ViewComponent)}})

It's very simple. That's all. It took me a lot of time to figure it out. Yeah, well, there's another place where I know too much.

First of all, three "constants" are defined, which are immutable variables that represent three pages, or three templates. They are 404, home page and about us.

Then a routing rule is defined, which is actually a json, which can also be understood as an entity class. Key represents the path and file name after the address of url, followed by our real page, the three constants defined in the first line.

Then there is a common example of vue. First, you need a div to correspond to it, then data returns the address above url, and then ViewComponent returns the corresponding template (page) based on the url address.

Finally, there is render. Probably to achieve the function of binding div.

A page is added according to this meaning.

About

Then, the running web page shows Page not found 404, and it seems that routing still works. So how do home and about get out?

II. HTML5 History API

First of all, I would like to add some relevant knowledge of HTML5 History API, if you have mastered it, please skip it.

HTML5 History API provides a feature that allows developers to modify the URL of a site without refreshing the entire page. This feature is very useful, for example, through a piece of JavaScript code to partially load the content of the page, you want to change the URL of the current page to reflect the changes in the content of the page, when this function can come in handy.

We can use history.pushState (null, null, 'about'); to change the url address, which simply modifies the url in the address without submitting it to the server, so that the page will not be refreshed and we will have a chance to execute the vue code.

And then, of course, the page will not change, because vue is data-driven, has our data changed? No, we just changed the url. This vue doesn't seem to monitor rul, or I don't know how to get vue to listen for changes in url. Anyway, we first change the data ourselves, and then we study whether vue has a way to monitor url.

We can just write a line of code route.currentRoute = _ window.location.pathname that modifies the data.

Finally, add a simple navigation and execute the above two lines of js code.

About function myURL (name) {history.pushState (null, null, name); route.currentRoute = _ window.location.pathname;}

Third, what if I press F5?

Pressing F5 will refresh the page, and if the url address bar is "/ about", the URL will be submitted to the server, obviously showing the server's 404 page. Because there is no such address in the server website. So what should I do? The way I can think of now is to modify the 404 page of the site. For example, IIS, you can change it in IIS and set the router.html to 404 in the response page, so that you can press F5.

Of course, this approach is not a good choice, but a temporary one. There should be a better way. It's all right. Take your time.

This method also supports typing http://127.0.0.1:8000/about directly into the address bar of the browser. You just need to pay attention to the reference address of vue.js to ensure that the js file is loaded correctly.

What if you type http://127.0.0.1:8000/aboutss in the address bar? Of course, it is the 404 module designed by vue.

However, there is one more question: how to change the const About? There is no way to do complex applications with such a simple template. Perhaps only in engineering projects, routing can play the most important role.

The above is all the contents of the article "sample Analysis of Vue routing Front and back end Design". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.