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

Most people do not understand the knowledge of this article "how to create vue routing", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this "how to create vue routing" article.

I. concept

Routing is used to set access paths and map paths to components

Generally use Vue to do is a single page application, there is only one main page index.html, so you write the tag is not effective, to use vue-router to manage.

Second, use steps

Step 1: install

Npm install vue-router

Step 2: create a new router folder, src/router/index.js, under the src file directory, where the routing component is written, and this file is the core file of the routing

/ / this file is specifically used to create a router for the entire application

Import VueRouter from "vue-router"

/ / introduce components

Import About from'.. / pages/About'

Import Home from'.. / pages/Home'

/ / create and expose a router

Const router = new VueRouter ({

Routes: [

{

Path:'/ about'

Component:About

}

{

Path:'/ home'

Component:Home

}

]

})

Export default router

Step 3: introduce related routes into the entry function

Import Vue from "vue"

Import App from'. / App.vue'

/ / introduce VueRouter

Import VueRouter from 'vue-router'

/ / introduce the router

Import router from'. / router/index'

Vue.config.productionTip = false

/ / Application plug-in

Vue.use (VueRouter)

/ / create a vue

New Vue ({

El:'# app'

Render: h = > h (App)

Router:router

})

Step 4: create two new routing components, which are generally stored in the pages folder

Part V: configuring App components

Route switching with router-link tag in vue

About

Active-class: indicates that the currently active route is highlighted

Specify the content rendering location of the component

About

Home

Export default {

Name: "App"

}

Note:

Routing components are usually stored in the pages folder, and general components are usually stored in the components folder

By switching, the 'hidden routing component' is destroyed by default and mounted when needed.

Each component has its own $route property, which stores its own routing information

There is only one router for the whole application, which can be obtained through the $router property of the component

Third, routing nesting

To jump, add the parent path: / home/news

Path: children: [

{path:'news', component:News

]

Be careful not to add'/ news' after path

For example, we need to nest two components in the home routing component in the basic step above.

Index.js file:

Const router = new VueRouter ({

Routes: [

{

Path:'/ about'

Component: About

}

{

Path:'/ home'

Component: Home

Children: [

{

Path: 'news'

Component:News

}

{

Path: 'message'

Component:Message

}

]

}

]

Then the display area of the home component is the presentation location of the nested component.

Home.vue

Home component content

News

Message

Export default {

Name: "Home"

}

IV. Route naming

Function: it can simplify the routing jump.

How to use:

First name the route

Const router = new VueRouter ({

Routes: [

{

Name:'guanyu'

Path:'/about'

Component:About

}

]

})

Simplified jump

First, take a look at the unnamed jump:

Jump

After simplification, jump directly through the name

Jump

Simplified writing method with transfer parameters

{{m.title}}

5. Query parameters and params parameters

5.1.Route query parameters

How to pass parameters:

Method 1: jump routing and carry query parameters, string writing method of to

{{m.title}}

Method 2: jump routing and carry query parameters, object writing of to

{{m.title}}

How to accept parameters:

Detail.vue

$route.query.xx

Message encoding: {{$route.query.id}}

Message encoding: {{$route.query.title}}

5.2. Params parameters of the route

Configure routing:

Children: [

{

Name:'xiangqing'

Path: 'detail/:id/:title', / / declare to accept the params parameter using a placeholder

Component: Detail

}

]

How to pass parameters:

Method 1: jump routing and carry params parameters, string writing method of to

{{m.title}}

Method 2: jump routing and carry params parameters, object writing of to

Special note: when the route carries the params parameter, if you use the object of to, you cannot use the path configuration item. You must use the name configuration.

{{m.title}}

How to accept parameters:

Detail.vue

$route.params.xx

Message encoding: {{$route.params.id}}

Message encoding: {{$route.params.title}}

VI. Params configuration of routing

When the parent component carries parameters to the child route, the child route can be used directly, which is easier to configure through params.

Function: make it easier for routing components to receive parameters

Previous: message Encoding: {undefined {$route.params.id}}

Now: message encoding: {undefined {id}}

6.1. Method 1

Routing configuration props [less used]

Children: [

{

Name: 'xiangqing'

Path: 'detail/:id/:title', / / declare to accept the params parameter using a placeholder

Component: Detail

Props: {a: '001mm, b:' Hello'}

}

]

Value is an object in which all key-value is passed to the Detail component in the form of props

Route accepts props

Routin

{{a}}

{{b}}

Export default {

Name: "Detail"

Props: ['axiajiaoyuanb']

Mounted () {

Console.log (this.$route)

}

}

6.2. Method 2

Routing configuration props

When props is a Boolean and true, many params parameters received by the routing component will be passed to the detail component in the form of props

Path: 'detail/:id/:title': the id and title parameters carried are both query parameters or params parameters carried when jumping to the path.

Children: [

{

Name: 'xiangqing'

Path: 'detail/:id/:title', / / declare to accept the params parameter using a placeholder

Component: Detail

Props:true

}

]

Route accepts props

Message encoding: {{id}}

Message encoding: {{title}}

Props: ['id','title']

6.2. Method 3

Routing configuration props

Children: [

{

Name: 'xiangqing'

Path: 'detail', / / declare to accept the params parameter using a placeholder

Component: Detail

Props ($route) {

Return {

Id: $route.query.id

Title:$route.query.title

}

}

}

]

Route accepts props

Message encoding: {{id}}

Message encoding: {{title}}

Props: ['id','title']

Seven. Two new lifecycle hooks (routing)

Function: two hooks unique to the routing component to capture the activation status of the routing component

Specific name: triggered when the activated routing component is activated, triggered when the deactivted routing component is inactivated

Even if the contents of the news are cached, the timer will be turned off when the news routing component is inactivated, and the cache and inactivation will not affect each other.

Export default {

Name: "News"

Data () {

Return {

Opacity: 1

}

}

Activated () {

This.timter = setInterval () = > {

This.opacity-= 0.01

If (this.opacity

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.