Vue. js uses vue-router to redirect to a page. vue. jsvue-router

Vue. js uses vue-router to redirect to a page. vue. jsvue-router

Preface

When using Vue. js for a project, a page consists of multiple components. Therefore, the traditional href is not suitable when you jump to the page. Therefore, vue-router came into being.

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

The main implementation results of this instance:

Project Structure:

1. Configure the Router

In the initial template created with vue-cli, there is no vue-router. You need to install it through npm.

cnpm i vue-router -D

After the installation is complete, create a routers. js file in the src folder, which is at the same level as main. js.

Then introduce the required components in router. js to 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 is configured with the route path, and component is configured with the mapped component.

Note that:Export default routers must be written at the bottom of the file, and an empty row must be followed. Otherwise, ESlint syntax verification cannot be performed.

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 is used. In this mode, the path is formatted #! .

Addmode: 'history' The HTML5 history mode will be used later. In this mode, there is no # prefix, and you can use pushState and replaceState to manage records.

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

Ii. nested Routing

In this instance, to deepen the project level, App. vue serves as a container for storing components:

Where<router-view>Is used to render components mapped through routes. When the path is changed,<router-view>The content in will also change

The preceding two routes are configured. When http: // localhost: 8080 or http: // localhost: 8080/home is enabled, the home is rendered in <router-view>. vue component

Home. vue is the real parent component, and sub-components such as first. vue and login. vue are rendered to home. vue.<router-view>

 

In this way, you need to nest a second-level route in the first-level route 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 secondary routes to children to implement route nesting.

When configuring the path, the nested path starting with "/" is treated as the root path, so the child path does not need to be added "/"

3. Use <router-link> to map routes

Home. vue introduces the header. vue component, which contains the navigation menu

When you click the navigation menu, the system switches to home. vue.<router-view>Content in

In this case, you only need to jump to the page and do not need to add a verification method, you can use<router-link>To implement the navigation function:

After compilation,<router-link>Is rendered as a <a> label, and to is rendered as an href.<router-link>When clicked, the url changes accordingly.

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

If you use the home component for rendering for 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" are mapped to the Home component.

You can also use$route.params.id To obtain the corresponding id.

Iv. Programmatic navigation

In actual situations, there are many buttons that will execute a series of methods before performing the jump. In this case, you can usethis.$router.push(location) To modify the url.

 

Push can be followed by an object or a string:

// String this. $ router. push ('/home/first') // object this. $ router. push ({path: '/home/first'}) // name the route this. $ router. push ({name: 'home', params: {userId: wise }})

5. Lessons learned

During the learning process, I encountered a long-standing problem, probably because after the first component jumps back to login, I cannot jump back. However, the url has been modified, and the page can be refreshed and displayed normally.

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

 

In the vue component, data must be written as a function, and return parameters must be used. However, if the data is empty, no error will be reported even if no return is written, resulting in the above problem.

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.