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

This article mainly shows you "how to use Vue routing vue-router", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use Vue routing vue-router" this article.

1. Vue-router1, introduction

(1) SPA:Single Page Application (single page application), which is simply understood as an application with only one web page. That is, to load a single HTML page and dynamically update the web application of the page according to the interaction between the user and the program. When it loads the page, it does not load the entire page, but only updates some of the content.

(2) routing: refers to the path manager of SPA. SPA is based on routing and components, where routes specify access paths and establish a mapping relationship between routes and components. Load different components by switching routes.

2. Use process

Step1: installing routing

[command line input] npm install vue-router-- save

Step2: introducing rout

[main.js] / / introduce vue-routerimport VueRouter from 'vue-router';// to use vue-routerVue.use (VueRouter)

Step3: create routing objects and declare routing rules (create routes)

New VueRouter ({routes: [/ / individual objects {path:'/ home', component: Home}, {path:'/ about', component: About}]})

Step4: transfer the router instance to the Vue instance (register routing)

New Vue ({router: router, / / use routing object render: h = > h (App),}). $mount ('# app')

Step5: using routin

/ / Select routing AboutHome// mapping component 2. Basic routing implementation

(1) File structure:

(2) complete code:

[main.js] import Vue from 'vue'import App from'. / App.vue'// introduces route object import router from'. / router/router.js'Vue.config.productionTip = falsenew Vue ({router: router, / / use route object render: h = > h (App)) }). $mount ('# app') [App.vue] About Home export default {} [About.vue] About [Home.vue] Home [router.js] / / introduce component import Vue from 'vue'import VueRouter from' vue-router 'import About from'.. / views/About.vue'import Home from'.. / views/Home.vue'// uses the component Vue.use (VueRouter) / / throws a VueRouterexport default new VueRouter ({routes: [{path:'/ about') Component: About}, {path:'/ home', component: Home}, / / default selected About component {path:'/', redirect:'/ about'},]})

(3) Screenshot: the effect of locally refreshing components

Click Home to switch to the Home component, and the url path changes.

Click About to switch to the About component, and the url path changes.

III. Nested routing

A set of routes in a route.

(1) File structure

(2) complete code

[modify the code based on basic routing Set a route into the Home component] [router.js] / / introduce the component import Vue from 'vue'import VueRouter from' vue-router'import About from'.. / views/About.vue'import Home from'.. / views/Home.vue'import News from'.. / views/News.vue'import Message from'.. / views/Message.vue'// uses the component Vue.use (VueRouter) / / throws a VueRouterexport default new VueRouter ({routes) out : [{path:'/ about' Component: About}, {path:'/ home', component: Home, / / define child routes using children children: [{path:'/ home/news', component: News} {path: 'message', / / abbreviated component: Message}, / / News component {path:' is selected by default / / abbreviated redirect:'/ home/news'},]}, {path:'/' Redirect:'/ about'}]}) [Home.vue] Home News Message [Message.vue] Message [News.vue] News

(3) Test screenshot:

Initial screen. About component is selected by default.

Click the Home component, and the News component is selected by default.

Click the Message component.

4. Cache routing components 1. Why to use

By default, when a route is switched, the switched route is destroyed and created again when it is switched back. If you want to keep the previous changes, you can use the cache to route the component object and cache the previous changes.

2. How to use [original method] [after modification] 3. Complete code [modify the above code] Add a text box] [App.vue] About Home export default {} [About.vue] About

Screenshot:

Initial interface:

Enter data:

Switch to the Home component

Switch back to the About component, and the value is not cleared.

5. Pass parameters 1. Pass through url (param pass)

Use the colon + parameter name (: name) as the placeholder, pass the parameters through url, and receive the parameters using $route.params.

[modify the above code] [router.js] / / introduce the component import Vue from 'vue'import VueRouter from' vue-router'import About from'.. / views/About.vue'import Home from'.. / views/Home.vue'// uses the component Vue.use (VueRouter) / / throw a VueRouterexport default new VueRouter ({routes: [{path:'/ about/:name/:age') out Component: About}, {path:'/ home', component: Home}, {path:'/' Redirect:'/ home'}]}) [App.vue] About Home export default {} [About.vue] About Name: {{$route.params.name}} age: {{$route.params.age}} [Home.vue] Home

Screenshot:

Initial interface

Click About to pass and receive parameters

2. Pass through query

Use path to match the route, locate the route according to name, pass parameters through query, and receive parameters using $route.query.

[modify the above code] [router.js] / / introduce the component import Vue from 'vue'import VueRouter from' vue-router'import About from'.. / views/About.vue'import Home from'.. / views/Home.vue'// uses the component Vue.use (VueRouter) / / throw a VueRouterexport default new VueRouter ({routes: [{path:'/ about', name: 'About') Component: About}, {path:'/ home', component: Home}, {path:'/' Redirect:'/ home'}]}) [About.vue] About name: {{$route.query.name}} age: {{$route.query.age}} [App.vue] About Home Export default {data () {return {people: {name: 'About' Query: {name: 'jarry', age:' 32'}

Screenshot:

Initial screen:

Click About to pass parameters

3. Pass through param

Similar to query, routes are located with name, but parameters are passed through param and received using $route.params.

[modify the above file] [App.vue] About Home export default {data () {return {people: {name: 'About' Params: {name: 'jarry', age:' 32'} [About.vue] About name: {{$route.params.name}} age: {{$route.params.age}}

Screenshot:

Initial screen:

Click About, and the parameters are passed normally.

6. The difference between $route and $router 1. $route

Route refers to the object of routing information, which contains information about routing. For example: path,name,fullPath,query,params,meta.

(1) $route.path and $route.fullPath

The path that corresponds to the current route.

(2) $route.query and $route.params

All belong to key-value objects and represent the parameters passed by url.

(3) $route.name

Refers to the name of the current route.

2. $router

Router refers to the object of the routing instance, that is, the instance created by new VueRouter. It contains commonly used methods (such as push (), replace (), back (), etc.).

(1) $router.push

Use the push method to add a new record to the browser's history stack and return to the previous page when the browser's back button is clicked or the back method is triggered.

(2) $router.replace ()

Using the replace method does not add a record to the history, but replaces the current record, and clicking the back button at this time does not return to the previous page.

3. Three forms of hop routing

(1) it is realized by tag.

+ implementation.

(2) realized by js code. (you can pass parameters by adding a query attribute.)

This.$router.replace ({path:'/Login'}) this.$router.replace ({path:'/Login', query: {name: 'tom'})

(3) realized by js code.

This.$router.push ({path:'/Login'}) these are all the contents of the article "how to use Vue routing vue-router". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.