Vue Road to climb the Pit (iii)--use Vue-router jump page

When using Vue.js to do the project, a page is composed of several components, so in the jump page, and not suitable for the traditional href, so vue-router came into being.

Official documents: https://router.vuejs.org/zh-cn/essentials/getting-started.html

have a lot of friends to find me to demo, but the blog in this case was I deleted, I had to write a super simple demo, hoping to help

Link: Http://pan.baidu.com/s/1nvqfA1V Password: 79BV

This time the example mainly realizes the following diagram effect:

Project structure:

First, configure Router

The original template created with VUE-CLI has no vue-router and needs to be installed via NPM

CNPM I vue-router-d

After the installation is complete, under the SRC folder, create a routers.js file, and the Main.js peer

Then introduce the required components into the router.js and create the routers objects

Import home from './components/home.vue '

const routers = [
  {
    path: '/home ',
    name: ' Home ',
    Component:home
  },
  {
    path: '/',
    component:home
  },

]
Export Default routers

In the routers object created, path configures the path of the route, component configured the mapped component

It is important to note thatexport default routers must be written at the bottom of the file, followed by a blank line, or it will not be validated by Eslint syntax

Then main.js also needs to modify:

Import Vue from ' Vue '
import vuerouter from ' vue-router '
import routers './routers '
import App from '. /app '

vue.use (vuerouter)

Const ROUTER = new Vuerouter ({
  mode: ' History ',
  routes:routers
})

New Vue ({
  el: ' #app ',
  router,
  render:h => H (APP)
})

In the router object created, if mode is not configured, the default hash mode is used, which formats the path as #! Beginning.

Adding mode: ' History ' will use the HTML5 history mode, which does not have a # prefix and can be used to manage records using Pushstate and Replacestate.

For more information on the HTML5 history model, refer to the official documentation: https://router.vuejs.org/zh-cn/essentials/history-mode.html

Second, the nested routines by

In this instance, to deepen the project hierarchy, App.vue is just a container for storing components:

Where <router-view> is used to render components that are mapped by routing, and the contents of,<router-view> change as the path changes

There are two routes already configured, and when http://localhost:8080 or Http://localhost:8080/home is turned on, the Home.vue component is rendered in <router-view>

Home.vue is the real parent component, First.vue, Login.vue, and other subcomponents are rendered to the Home.vue <router-view>

In this way, you need to nest level two routes in a first-tier route and modify the Routers.js

Import home from './components/home.vue ' Import the '.
/components/children/first.vue ' import
Login from './components/children/login.vue '

const routers = [
  {
    path: '/',
    component:home,
Children: [ 
{ 
path: '/', 
 component:login  }
　　　　]
  },
  {
    path: '/ho Me ',
    name: ' Home ',
    component:home,
    Children: [
      {
        '/',
        name: ' Login ' ,
        Component:login
      },
      {
        path: ' A ',
        name: '
        component:first '
      } 
    ]
  }
]

Export default Routers

After configuring the route, adding children and adding a level two route to the children enables routing nesting

When you configure path, nested paths that begin with "/" are treated as root paths, so the path of the subpath does not need to add "/"

Iii. Use <router-link> Map routing

The Header.vue component is introduced in the Home.vue, which contains the navigation menu

When the navigation menu is clicked, the contents of the <router-view> in Home.vue will be switched.

This is just a jump page, you do not need to add validation methods , you can use the <router-link> to achieve the function of navigation:

After compiling,<router-link> will be rendered as <a> tags, to be rendered as href, and when <router-link> is clicked, the URL will change accordingly

If you use the v-bind instruction, you can also connect the variable to the back, with the v-for instruction to render the navigation menu

If you want to render using the home component for all users who have different IDs, you can add dynamic parameters to the routers.js:

{ 
    path: '/home/: ID',
    component:home
}

Such routes as "/home/user01", "/home/user02", "/home/user03" will be mapped to the home component

You can then also use $route. Params.id to get the corresponding ID

Four, the programming navigation

In reality, there are a number of buttons that perform a series of methods before the jump, and you can use this . $router. Push (location) to modify the URL and complete the jump

The push can be either an object or a string after it:

String this
. $router. Push ('/home/first ')

//Object this
. $router. Push ({path: '/home/first '})

//named route This
. $router. Push ({name: ' Home ', params: {userid:wise}})

v. Precedent

In the process of learning, encountered a problem for a long time, probably from the beginning of the module jump back to login, can not jump again. However, the URL has been modified and the Refresh page can be displayed normally.

That's because I didn't write return in data in the First.vue component.

In the Vue component, data must be written as a function, and return should be returned to the parameter. However, when the data is empty, even if you do not write return will not error, so caused the above problem.