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

This article will explain in detail how to use vue-router. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

I. introduction

To learn vue-router, you need to know what the route here is. Why can't we write links directly with tags as before? How do I use vue-router? What are the common routing operations? Wait, these questions.

What is vue-router?

The route here does not refer to what we usually call the hardware router, but the route here is the path manager of SPA (single page application). In a popular way, vue-router is the link path management system of WebApp. Vue-router is the official routing plug-in of Vue.js. It is deeply integrated with vue.js and is suitable for building single-page applications. The single-page application of vue is based on routing and components, which are used to set access paths and map paths to components. Traditional page applications use some hyperlinks to switch and jump pages. In vue-router single-page applications, it is the switching between paths, that is, the switching of components. The essence of routing module is to establish the mapping relationship between url and page. As for why we can't use a tag, this is because what we do with Vue is a single page application, which is equivalent to only one main index.html page, so the tag you write doesn't work, you have to use vue-router to manage it.

Third, the realization principle of vue-router

SPA (single page application): a single-page application with only one complete page; when a page is loaded, it does not load the entire page, but only updates the contents of a specified container. One of the cores of single-page application (SPA) is to update the view without re-requesting the page; vue-router provides two ways to implement single-page front-end routing: Hash mode and History mode; which method is decided according to the mode parameters.

1. Hash mode:

Vue-router default hash mode-uses URL's hash to simulate a full URL, so when the URL changes, the page does not reload. Hash (#) is the anchor point of URL and represents a location in the web page. Only after changing the part after #, the browser will only scroll to the corresponding location and will not reload the web page, that is to say, # is used to guide the browser action and is of no use to the server, and the HTTP request will not include # At the same time, each time the part after changing # will add a record to the browser's access history, and you can return to the previous position by using the "back" button, so Hash mode renders different data of specified DOM location according to different values by changing the value of anchor point.

2. History mode:

Since the hash mode comes with # in url, if we don't want an ugly hash, we can use the routed history mode, just add "mode: 'history'" when configuring the routing rules, which makes full use of history.pushState API to complete the URL jump without reloading the page.

/ / const router = new VueRouter in the main.js file ({mode: 'history', routes: [...]})

When you use history mode, URL is like a normal url, such as http://yoursite.com/user/id, which looks better! However, in order to play this mode well, it also needs background configuration support. Because our application is a single-page client application, if the background is not configured correctly, users will return 404 when they directly access http://oursite.com/user/id in the browser, which is not good-looking. So, you need to add a candidate resource that covers all situations on the server: if the URL does not match any static resources, you should return the same index.html page, which is the page on which your app depends.

Export const routes = [{path: "/", name: "homeLink", component:Home} {path: "/ register", name: "registerLink", component: Register}, {path: "/ login", name: "loginLink", component: Login}, {path: "*", redirect: "/"}]

Set here that if the URL is typed incorrectly or if the URL does not match any static resources, it will automatically jump to the Home page

3. The way of using routing module to realize page jump

Method 1: modify the address bar directly

Mode 2:this.$router.push ('routed address')

Mode 3:

IV. Mode of use of vue-router

1: download npm I vue-router-S

2: introduce import VueRouter from 'vue-router' into main.js

3: install the plug-in Vue.use (VueRouter)

4: create routing objects and configure routing rules

Let router = new VueRouter ({routes: [{path:'/home',component:Home}]})

5: pass its routing object to the instance of Vue, and add router:router to options

6: leave a pit in app.vue

For the specific implementation, please see the following code:

/ / introduce import Vue from 'vue';import VueRouter from' vue-router';// principal import App from'. / components/app.vue';import Home from'. / components/home.vue'// to install the plug-in Vue.use (VueRouter) in the / / main.js file; / / mount properties / / create routing objects and configure routing rules let router = new VueRouter ({routes: [/ / objects {path:'/ home', component: Home}]}) / / new Vue starts new Vue ({el:'# app', / / Let vue know our routing rules router: router, / / We can abbreviate router render: C = > c (App),})

Finally remember to "leave a hole" in app.vue.

/ / export default {data () {return {}} in app.vue

V. Core points of vue-router

How to pass parameters to 1.vue-router

① uses name to pass parameters

Configure the name attribute in the routing file src/router/index.js

Routes: [{path:'/', name: 'Hello', component: Hello}]

The template (src/App.vue) uses $router.name to receive things such as:

{{$router.name}}

② passes parameters through to in the tag

The basic syntax of this method of passing parameters:

ValueString

For example, in the src/App.vue file first

Hi Page 1

Then name the route configured for hi1 in the src/router/index.js file, which is called hi1.

{path:'/hi1',name:'hi1',component:Hi1}

Finally, it is received with $route.params.username in the template (src/components/Hi1.vue).

{{$route.params.username}}-{{$route.params.id}}

③ vue-router uses url to pass parameters-set parameters in the configuration file in the form of colons.

We configure routing in the / src/router/index.js file

{path:'/params/:newsId/:newsTitle', component:Params}

The parameters we need to pass are news ID (newsId) and news headlines (newsTitle). So we set these two values in the routing profile. Set up our params.vue component, or page, in the src/components directory. We output the news ID and headlines delivered by url on the page.

{{msg}}

News ID: {{$route.params.newsId}}

News headline: {{$route.params.newsTitle}}

Export default {name: 'params', data () {return {msg:' params page'}

Add our tags to the App.vue file. At this time, we can directly use url to pass the value.

Params

two。 Single page multi-routing area operation

We have more than two areas on one page, and we manipulate the contents of these areas by configuring routed js files.

① App.vue file, write two new lines of tags below, and add some CSS styles

H1 H2

② needs to configure these three areas in the route, which is mainly done in the components field.

Export default new Router ({routes: [{path:'/', name: 'HelloWorld', components: {default: HelloWorld, left:H1,// displays H1 component content' I am H1 page,Welcome to H1' right:H2// shows H2 component content'I am H2 page,Welcome to H2'}}, {path:'/ H2 component, name:'H1 component, components: {default: HelloWorld Left:H2,// displays H2 component content right:H1// displays H1 component content}}]})

In the above code, we have written two paths, one is the default'/', the other is'/ Hi'. In the components under the two paths, we define the display content for all three areas. The final page is shown below:

3.vue-router configuration child routing (secondary routing)

The application interface in real life is usually composed of multiple layers of nested components. Similarly, the dynamic paths of each segment in URL correspond to nested layers of components according to a certain structure, for example:

How to achieve the following effect (H1 page and H2 page are nested in the home page)?

① first added two new navigation links with tags

Home page H1 page H2 page

② adds tags to HelloWorld.vue to provide insertion location for subtemplates

{{msg}}

③ creates two new component templates under the components directory. The contents of H1.vue and H2.vue are similar. The following is the content of the H1.vue page:

{{msg}} export default {data () {return {msg:'I am H1 page,Welcome to H1'}

④ modifies the router/index.js code, and the child route is written by adding the children field under the original routing configuration.

Routes: [{path:'/', name: 'HelloWorld', component: HelloWorld, children: [{path:' / H2, name:'H1, component: H1}, {path:'/ h3, name:'H2, component: H2}]}]

4.vue-router jump method

Let's order! . Export default {methods: {goToMenu () {this.$router.go (- 1) / / Jump to the last browsed page this.$router.replace ('/ menu') / / specify the address of the jump this.$router.replace ({name:'menuLink'}) / / specify the name of the jump route this.$router.push ('/ menu') redirect this.$router.push through push ({name:'menuLink) '}) under the name of the jump route via push}

5.404 page settings

Users will often type the wrong page, when the user typed the wrong page, we want to give him a friendly prompt page, which is what we often call the 404 page. Vue-router also provides us with such a mechanism. ① sets up our routing profile (/ src/router/index.js)

{path:'*', component:Error}

The path:'*' here means that when the input address does not match, the file content of the Error.vue is automatically displayed.

② create a new Error.vue file under the / src/components/ folder. Simply enter something about the error page.

{{msg}} export default {data () {return {msg: 'Error:404'}

When we enter a wrong address at random, we will automatically jump to the 404 page.

This is the end of the article on "how to use vue-router". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.