Vue uses vue-router to jump pages

When using Vue.js as a project, a page is composed of multiple components, so it is not suitable to use traditional href when jumping pages, so vue-router came into being.

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

Many friends asked me for a demo, but I deleted this case in the blog, so I had to write a super simple demo at random, I hope it can help

Link: https://pan.baidu.com/s/1pMfi5tD Password: pjwx
This instance mainly achieves the effect of the following figure:

Project structure:

1. Configure Router

There is no vue-router in the initial template created with vue-cli, it needs to be installed through npm

cnpm i vue-router -D

After the installation is complete, in the src folder, create a routers.js file, level with main.js

Then introduce the required components in router.js and create the routers object

import Home from './components/home.vue'

const routers = [
  {
    path: '/home',
    name: 'home',
    component: Home
  }，
  {
    path: '/',
    component: Home
  }，
]
export default routers

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

It should be noted that export default routers must be written at the bottom of the file, and a blank line must follow, otherwise it will not pass ESlint syntax verification

Then main.js also needs to be modified:

import Vue from 'vue'
import VueRouter from 'vue-router'
import routers from './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 created router object, if mode is not configured, the default hash mode will be used, in which the path will be formatted as #! at the beginning.

Adding mode: 'history' will use HTML5 history mode, which has no # prefix and can use pushState and replaceState to manage records.

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

2. Nested Routing

In this example, in order to deepen the project hierarchy, App.vue is only used as a container for storing components:

it is used to render the components mapped by routing, and when the path changes, the content in will also change

Two routes have been configured above. When opening http://localhost:8080 or http://localhost:8080/home , the home.vue component will be rendered in

home.vue is the real parent component, and sub-components such as first.vue and login.vue will be rendered in home.vue. As a

result , it is necessary to nest the second-level routing in the first-level routing and modify routers.js

import Home from './components/home.vue'
import First from './components/children/first.vue'
import Login from './components/children/login.vue'

const routers = [
  {
    path: '/',
    component: Home,
　　 children: [ 
　　　{ 
　　　　path: '/', 
 　　　 component: Login 
　　  }
　　]
  },
  {
    path: '/home',
    name: 'home',
    component: Home,
    children: [
      {
        path: '/',
        name: 'login',
        component: Login
      },
      {
        path: 'first',
        name: 'first',
        component: First
      } 
    ]
  }
]

export default routers

After the configured route, add children and add a second-level route in children to achieve route nesting

When configuring the path, the nested path starting with "/" will be regarded as the root path, so the path of the sub-route does not need to add "/"

3. Use map routing

The header.vue component is introduced in home.vue, which contains the navigation menu

When the navigation menu is clicked, the content in home.vue will be switched

This kind of situation that only needs to jump to the page and does not need to add a verification method, it can be used to realize the function of navigation:

after compilation, it will be rendered as a label , to will be rendered as href, and when it is clicked, the url will occur corresponding changes

If you use the v-bind command, you can also add a variable after to, and use the v-for command to render the navigation menu

If you want to use the home component for rendering for all users with different IDs, you can add dynamic parameters in routers.js:

{ 
    path: '/home/:id',
    component: Home
}

In this way, routes such as "/home/user01", "/home/user02", and "/home/user03" will be mapped to the Home component

Then you can also use $route.params.id to get the corresponding id

4. Programmatic Navigation

In fact, there are many buttons that execute a series of methods before executing the jump. At this time, you can use this.$router.push(location) to modify the url. After the jump, the


push can be an object or a character. string:

// 字符串
this.$router.push('/home/first')

// 对象
this.$router.push({ path: '/home/first' })

// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})

5. Lessons from the past

In the process of learning, I encountered a problem that has been bothering me for a long time. It is probably that after jumping back to login from the first component, it cannot be jumped back. But the url has been modified, and refreshing the page can also display normally.

This is because I did not write return in the data in the first.vue component.


In the vue component, data must be written as a function, and return needs to be used to return parameters. But when data is empty, no error will be reported even if return is not written, which leads to the above problem.