Detailed explanation of VueRouter routing

Detailed explanation of VueRouter routing

vue router

1. Understand the concept of routing

1.1 What is Routing?

The activity of transferring information from a source address to a destination address through an interconnected network.

1.2. Backend routing stage

In the early days of website development, the entire HTML page was rendered by the server.
The server directly generates and renders the corresponding HTML page and returns it to the client for display.
But how does a website handle so many page servers?
A page has its own corresponding web address, or URL.
The URL is sent to the server, which matches the URL with a regular expression and finally passes it to a Controller for processing.
The Controller performs various processing and finally generates HTML or data and returns it to the front end.
This completes an IO operation.
The above operation is backend routing.
When we need to request different path content in our page, we hand it over to the server for processing. The server renders the entire page and returns the page to the client. In this case, the rendered page does not need to load any js and css separately, and can be directly handed over to the browser for display, which is also conducive to SEO optimization.
Disadvantages of backend routing:
One situation is that the entire page module is written and maintained by backend personnel.
Another situation is that if a front-end developer wants to develop a page, he needs to write page code using languages ​​such as PHP and Java.
And usually HTML code, data and corresponding logic are mixed together, which is very difficult to write and maintain.

1.3. Front-end routing stage

Front-end and back-end separation stage:
With the emergence of Ajax, there is a development model with separation of front-end and back-end.
The backend only provides an API to return data, the frontend obtains data through Ajax, and can render the data to the page through JavaScript.
The biggest advantage of this is the clear responsibilities of the front-end and back-end. The back-end focuses on data, and the front-end focuses on interaction and visualization.
And when the mobile terminal (iOS/Android) appears, the backend does not need to do any processing and can still use the previous set of APIs.
Many websites are still developed in this way.
Single-page rich application stage:
In fact, the main feature of SPA is that it adds a layer of front-end routing on the basis of front-end and back-end separation.
That is, the front end maintains a set of routing rules.
What is the core of front-end routing?
The URL is changed, but the page is not refreshed as a whole.
How to achieve it?

1.4. Front-end rendering and back-end rendering?

Front-end rendering : The server directly generates and renders the corresponding HTML page and returns it to the client for display. For example: jsp page

insert image description here

Back-end rendering : The back-end returns JSON data, and the front-end uses a pre-written HTML template to loop through the JSON data, concatenate strings, and insert them into the page.

insert image description here

2. Front-end routing rules

2.1. URL hashing

location description

insert image description here

location.href effect refreshes the entire page

Please add a description of the image

location.hash partial refresh instead of full refresh

Please add a description of the image

2.2. HTML5 history mode

  • pushState back stack structure

Features: First in, last out pushState: push into the stack back: pop out of the stack

The effect is as follows

  • replaceState back

No way back

  • go

history.go(-1) Go back one step
history.go(1) <=> history.forward() Go one step forward

3. Basics of route-view

3.1 Understanding vue-router

  • vue-router is based on components and routing

Routing is used to set access paths and map paths to components.
In a single-page application of vue-router, the change of the page path is the switching of components.

3.2. Install and use vue-router

  • Using webpack to create engineering development
  • Installnpm install vue-router --save
  • Modular use

Import the routing object and call Vue.use(VueRouter)

Create a routing instance and pass in the routing map configuration

Mount the created routing instance in the vue instance

  • Using vue-router steps

Creating a Routing Component

Configure route mapping, component and path mapping relationships

About.vue

<template>
  <div>
    <h2>I am about</h2>
    <p>I'm about content, hehe</p>
  </div>
</template>

<script>
  export default {
    name: "About"
  }
</script>

<style scoped>

</style>

Home.vue

<template>
  <div>
    <h2>I am the home page</h2>
    <p>I am the homepage content, hahaha</p>
  </div>
</template>

<script>
  export default {
    name: "Home"
  }
</script>

<style scoped>

</style>

router -> index.js

// Create a VueRouter object const routes = [
    {
        path: '',
        <!--Default value for routing-->
        // The default page loads directly to the home page redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
]

const router = new VueRouter({
    //Configure the application relationship between routes and components routes,
    mode:"history",
    linkActiveClass:"active"
})
  • Use router-link and router-view to display
<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="about">About</router-link>
    <router-view/>
  </div>
</template>

General process
1. Create a Vue project through instructions

vue create vuerouterstudy

2. Delete the default generated HelloWorld component related information
3. Create a routing instance and pass in the routing map configuration

Home.vue

<template>
    <div>
        I am the home page content</div>
</template>

index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'

// 1. Install the plugin Vue.use(VueRouter) via Vue.use(plugin name)

// 2. Create a VueRouter object const routes = [
    {
        path: '/home',
        component: Home
    }
]

// 3. Configure the mapping relationship between routing and components const router = new VueRouter({
    routes
})

// 4. Pass the router object into the Vue instance export default router

Using Routes
App.vue

<template>
  <div id="app">
    <!-- Render hyperlink a -->
    <router-link to="/home" tag="button">Home</router-link>
    <router-link to="/about" tag="button">About</router-link>

    <!-- Dynamic rendering component -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
</style>

Brief description of components

<router-link>: This tag is a built-in component of vue-router, and will eventually render a link <router-view>: This tag will dynamically render other content of different component web pages according to the current path, such as the title navigation at the top, or some copyright information at the bottom. When the same registered route is switched, the switch is the component mounted by <router-view>, and other content does not change

Final Rendering

insert image description here

3.3. Default path of routing

By default, when you enter the homepage of the website, we want <router-view> to render the content of the homepage.
However, in our implementation, the homepage component is not displayed by default, and the user must click it.
How can I make the path jump to the home page by default, and have <router-view> render the home page component?
It's very simple, we just need to configure one more mapping.

insert image description here

Configuration parsing

We configured another mapping in routes.
The path configuration is the root path: /
Redirect is redirection, that is, we redirect the root path to the path of /home, so that we can get the result we want.

3.4. HTML5 history mode

The default page is the hash mode of the URL

insert image description here

If you want to change to history in HTML5, you can configure it as follows

insert image description here

After

Please add a description of the image

3.5. router-link supplement

  • Tag attribute: tag can specify what component to render later. For example, the above code will be rendered as an element instead of

insert image description here

  • Replace attribute: Replace does not leave a history record, so when replace is specified, the back key cannot return to the previous page

insert image description here

  • Active-class attribute: When the corresponding route is matched successfully, a router-link-active class will be automatically set for the current element. Setting active-class can modify the default name.

This class is used when highlighting the navigation menu or the bottom tabbar.
However, the class attributes are usually not modified, and the default router-link-active is used directly.

insert image description here

You can also use this method in the index.js of the routing configuration

3.6. Routing code jump

Source code implementation

<template>
  <div id="app">
    <!-- Render hyperlink a -->
    <!-- <router-link to="/home" tag="h1" replace>Home</router-link> -->
    <!-- <router-link to="/about" tag="h1" replace active-class>About</router-link> -->
    <button @click="handleHome">Home</button>
    <button @click="handleAbout">About</button>
    <!-- Dynamic rendering component -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  methods:{
    handleHome(){
      this.$router.push('/home')
    },
    handleAbout(){
      this.$router.push('/about')
    }
  }
};
</script>

<style></style>

Rendering

Please add a description of the image

3.7 Dynamic Routing

In some cases, the path of a page may be uncertain. For example, when we enter the user interface, we hope to have the following path:
/user/aaaa or /user/bbbb
In addition to the /user in front, the user's ID is also followed
This matching relationship between path and Component is called dynamic routing (also a way of routing data transfer).

1. Mapping between configuration components and paths

//Configure routing related informationimport Vue from 'vue'
import VueRouter from "vue-router"

import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'
// Install the plugin Vue.use(VueRouter) through Vue.use(plugin)

// Create a VueRouter object const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }, 
    <!--This is the key code-->
    {
        path: '/user/:id',
        component: User
    },
]

const router = new VueRouter({
    //Configure the application relationship between routes and components routes,
    mode: "history",
    linkActiveClass: "active"
})

// Pass the router object into the Vue instance export default router

2. Create the User component User.vue

<template>
    <div>
        <h1>I am the APP page</h1>
        {{$route.params.id}}
    </div>
</template>

3. Home page display
App.vue

    <router-link to="/home/Geek Mouse" >Test to get the username</router-link><br>

4. Rendering

insert image description here

4. Lazy loading of routes

4.1. Understanding lazy loading

The official explanation is:
When bundling your app, the JavaScript bundle can become very large, impacting page load time.
If we can split the components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed, it will be more efficient. What is the official saying?
First of all, we know that there are usually many different pages defined in the route.
Where is this page finally packaged? Generally, it is placed in a js file.
However, putting so many pages in one js file will inevitably make the page very large.
If we request this page from the server all at once, it may take some time, and the user's computer may even be blank for a short time.
How to avoid this situation? Use lazy loading of routes.
What does lazy loading of routes do?
The main function of lazy loading of routes is to package the components corresponding to the routes into individual js code blocks.
Only when this route is accessed, the corresponding component is loaded

4.2. Lazy loading effect

//Configure routing related informationimport Vue from 'vue'
import VueRouter from "vue-router"

const Home = () => import ('../components/Home')
const About = () => import ('../components/About')
const User = () => import ('../components/User')
// Install the plugin Vue.use(VueRouter) through Vue.use(plugin)

// Create a VueRouter object const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }, {
        path: '/user/:id',
        component: User
    },
]

const router = new VueRouter({
    //Configure the application relationship between routes and components routes,
    mode: "history",
    linkActiveClass: "active"
})

// Pass the router object into the Vue instance export default router

4.3. Lazy loading method

insert image description here

5. Nested use of routes

5.1. Understanding nested routing

Nested routing is a very common feature. For example, in the home page, we want to access some content through /home/news and /home/message.
One path maps to one component, and accessing these two paths will render two components respectively.

Component and path relationships

insert image description here

5.2 Implementation process

1. Create two components: Message and News

Message.vue

<template>
  <div id="about">Latest News</div>
</template>
<script>

</script>

News.vue

<template>
  <div id="about">News content</div>
</template>
<script>

</script>

2. Configure routing information mainly for sub-routes

import Vue from 'vue'
import VueRouter from 'vue-router'
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const Message = () => import('../components/Message')
const News = () => import('../components/News')

// 1. Install the plugin through Vue.use(plugin name) Vue.use(VueRouter);

// 2. Create a VueRouter object const routes = [
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'news',
                component: News
            },
            {
                path:'message',
                component: Message
            }
        ]
    },
    {
        path: '/home/:username',
        component: Home
    },
    
    {
        path: '/about',
        component: About
    }
]

// 3. Configure the mapping relationship between routing and components const router = new VueRouter({
    routes,
    mode: 'history',
    // linkActiveClass: 'active'
})

// 4. Pass the router object into the Vue instance export default router

insert image description here

3. Parent component renders child component information

Home.vue

<template>
  <div id="home">
    I am the home page content<br>

    <router-link to="/home/news"> News</router-link>
    <router-link to="/home/message"> message</router-link>
    <router-view></router-view>
    <!-- <h2>Username: {{ $route.params.username }}</h2> -->
  </div>
</template>
<script>
export default {
  name: "Home",
};
</script>

4. Rendering

Please add a description of the image

5.3. Default path for nested routes

redirect

{
        path: '/user',
        component: User,
        children: [
            {
                path: 'message',
                component: Message,
            },
            {
                path: 'news',
                component: News,
            },
            // Redirect /user/news
            {
                path: '',
                redirect: 'news',
            },
        ]
    },

6. Routing parameters

There are two main types of passed parameters: params and query
params type

1. Configure routing format: /router/:id

2. Transfer method: follow the path with the corresponding value

3. The path formed after transmission: /router/123, /router/abc

query type

1. Configure the routing format: /router, which is the normal configuration

2. Transfer method: Used in objects The query key is used as the transmission method

3. The path formed after transmission: /router?id=123,/router?id=abc

6.1. Preparation

One of the passed parameters: router-link

1. Create component Profile.vue

<template>
  <div>
    <h2>I am the Profile page</h2>
    <p>My profile page details</p>
    <!--Get string input, for example: /profile/123-->
    <p>$route.params:{{ $route.params }}</p>
    <!--Get object type input parameter, for example: /profile?name=1&age=10-->
    <p>$route.query:{{ $route.query }}</p>
  </div>
</template>

<script>
export default {
  name: "Profile",
};
</script>

<style scoped>
</style>

2. Configure routing

const Profile = () => import('../components/Profile')
    {
        path: '/profile/:id',
        component: Profile
    }

3. app.vue page display

 <router-link
      :to="{
        path: '/profile/' + 123,
        query: { name: 'geekmice', hobby: 'basketball' }
      }"
      tag="button"
      >router-link passes parameters</router-link
    >

4. Final effect

insert image description here

Passing parameters 2: js implementation

    <button @click="jsTransferParams">js transfer parameters</button>
   jsTransferParams() {
      this.$router.push({
        path: "/profile/" + 666,
        query: { name: "geekmice", hobby: "Explore black technology" },
      });
    },
    
    profile.vue gets parameters <p>$route.params:{{ $route.params }}</p>
    <p>$route.query:{{ $route.query }}</p>

insert image description here

6.2. Get parameters

Get the parameters through the $route object.

In an application using vue-router, the routing object will be injected into each component and assigned to this.$route, and the routing object will be updated when the route is switched.
The information passed by $route is as follows

insert image description here

6.3、 The difference between router and route

Simply put, one is used to obtain routing information, and the other is used to operate routing;

$router is a VueRouter instance. If you want to navigate to a different URL, use the $router.push method to route the jump method, hook function, etc.

$route is the current router redirect object, which can get name, meta, path, hash, query, params, fullPath, matched, redirectedFrom, etc.

7. Routing Navigation Guard

The navigation guard provided by vue-router is mainly used to monitor the entry and exit of the route
vue-router provides beforeEach and afterEach hook functions, which will be triggered before and after the route is about to change.

Use beforeEach to complete the title modification

  • First, we can define some titles in the hook, which can be defined using meta
  • Secondly, use the navigation guard to modify our title
//Configure routing related informationimport Vue from 'vue'
import VueRouter from "vue-router"

const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const Message = () => import('../components/Message')
const News = () => import('../components/News')
const Profile = () => import('../components/Profile')

// Install the plugin Vue.use(VueRouter) through Vue.use(plugin)

// Create a VueRouter object const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        meta: {
            title: "Home"
        }
    },
    {
        path: '/profile/:id',
        component: Profile,
        meta: {
            title: "Archives"
        }
    },
    {
        path: '/about',
        component: About,
        meta: {
            title: "About"
        }
    }, {
        path: '/user',
        component: User,
        children: [
            {
                path: 'message',
                component: Message,
            },
            {
                path: 'news',
                component: News,
            },
            {
                path: '',
                redirect: 'news',
            },
        ]
    },
]

const router = new VueRouter({
    //Configure the application relationship between routes and components routes,
    mode: "history",
    linkActiveClass: "active"
})

router.afterEach((to, from, next) => {
    document.title = to.matched[0].meta.title;
    next()
})

// Pass the router object into the Vue instance export default router

Rendering

Please add a description of the image

Brief Description

Analysis of three parameters of navigation hook

  • to: The routing object of the target to be entered
  • from: The route object that the current navigation is about to leave
  • After calling this method, you can enter the next hook

8. keep-alive

This component is a built-in component of Vue, which can keep the state in memory during component switching to prevent repeated rendering of DOM.
Case explanation to understand

Requirement: There are two components, KeepStart and KeepEnd. The KeepStart component has an input box, and the input information can be cached. The KeepEnd component cannot be cached.

Source code implementation
1.KeepStart.vue

<template>
    <div>
        <h1>Start Page</h1>
        <input type="text" placeholder="Please enter..."">
    </div>
</template>

2. KeepEnd.vue

<template>
    <div>
        <h1>No need to cache pages</h1>
        <input type="text" placeholder="Please enter">
    </div>
</template>

3. router->index.js

const KeepStart = () => import('../components/KeepStart')
const KeepEnd = () => import('../components/KeepEnd')
  {
        path: '/keepStart',
        component: KeepStart,
        name:'keepStart',
        meta: {
            keepAlive: true
        }
    },
    {
        path: '/keepEnd',
        name:'keepEnd',
        component: KeepEnd,
        meta: {
            keepAlive: false
        }
    }

4. App.vue

    <router-link to="/keepStart" tag="button">keepstart page</router-link>
    <router-link to="/keepEnd" tag="button">keepend page</router-link>
    <!-- Dynamic rendering component -->
    <!-- <router-view></router-view> -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

Rendering

Please add a description of the image

9. TabBar Exercise

9.1. Requirements Statement

Rendering

Please add a description of the image

Description <br /> Implement a navigation bar with four columns: Category, Home, Shopping Cart, and My. Users click on each column to display different pages. Use the idea of ​​slots to achieve scalability.

9.2 Demand Analysis

  • 1. If there is a separate TabBar component below, how to install it

Customize TabBar component and use it in APP

Make the Tabbar at the bottom and set related styles

  • 2. The content displayed in the TabBar is determined externally

Defining Slots

Flex layout rating TabBar

  • 3. Customize TabBarItem, you can pass in pictures and text

Define TabBarItem and define two slots: picture and text

Give the two slots an outer wrapper div for styling

Fill the slot to achieve the effect of the bottom TabBar

  • 4. Pass in the selected highlighted image

Define another slot to insert the data of active-icon

Define a variable isActive and use v-show to decide whether to display the corresponding icon

  • 5. TabBarItem binds routing data

Install routing npm install vue-router --save

Complete router->index.js and create the corresponding components

main.js registers router

App.vue adds router-view component rendering

  • 6. Click item to jump to the corresponding routing table, and dynamically set isActive

Listen to item clicks and replace the routing path through this.$router.replace()

Use this.$route.path.indexOf(this.link) !== -1 to determine whether it is active

  • 7. Dynamically calculate active styles

Encapsulate the new calculated property this.isActive ? {'color':'red'}:{}

9.3. Demand realization

Implementation version 1

Create a Vue project

vue create navbar

Delete useless components HelloWorld Image

Simple directory structure

insert image description here

App.vue

<template>
  <div id="app">
    <div id="tab-bar">
      <div id="tab-bar-item">Home</div>
      <div id="tab-bar-item">Category</div>
      <div id="tab-bar-item">Shopping Cart</div>
      <div id="tab-bar-item">My</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
/* Import css style */
@import url("./assets/css/base.css");

#tab-bar {
  display: flex;
  background-color: rgb(246, 246, 246);

  /* Absolute positioning */
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
}

#tab-bar-item {
  flex: 1;
  text-align: center;
  height: 49px;


}
</style>

base.css

body{
    padding: 0;
    margin: 0;
}

Rendering

insert image description here

Final version <br /> Directory structure

insert image description here

Key source code implementation

TabBar.vue package

<template>
  <div id="tab-bar">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "TabBar"
  }
</script>

<style scoped>
  #tab-bar {
    display: flex;
    background-color: #f6f6f6;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    box-shadow: 0 -1px 1px rgba(100,100,100,.2);
  }
</style>

TabBarItem.vue package

<template>
  <!--All items display the same image and text-->
  <div class="tab-bar-item" @click="itemClick">
    <div v-if="!isActive"><slot name="item-icon"></slot></div>
    <div v-else><slot name="item-icon-active"></slot></div>
    <div :style="activeStyle"><slot name="item-text"></slot></div>
  </div>
</template>

<script>
  export default {
    name: "TabBarItem",
    props: {
      path: String,
      activeColor: {
        type: String,
        default: 'red'
      }
    },
    data() {
      return {
        // isActive: true
      }
    },
    computed: {
      isActive() {
        // /home -> item1(/home) = true
        // /home->item1(/category) = false
        // /home->item1(/cart) = true
        // /home->item1(/profile) = true
        return this.$route.path.indexOf(this.path) !== -1
      },
      activeStyle() {
        return this.isActive ? {color: this.activeColor} : {}
      }
    },
    methods: {
      itemClick() {
        this.$router.replace(this.path)
      }
    }
  }
</script>

<style scoped>
  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
  }

  .tab-bar-item img {
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
</style>

Configure routing index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import('../views/home/Home')
const Category = () => import('../views/category/Category')
const Cart = () => import('../views/cart/Cart')
const Profile = () => import('../views/profile/Profile')

// 1. Install the plugin Vue.use(VueRouter)

// 2. Create a routing object const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/category',
    component: Category
  },
  {
    path: '/cart',
    component: Cart
  },
  {
    path: '/profile',
    component: Profile
  }
]
const router = new VueRouter({
  routes,
  mode: 'history'
})

// 3. Export router
export default router

Final result

insert image description here

This is the end of this article about VueRouter routing. For more relevant VueRouter routing content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • A simple example of using Vue3 routing VueRouter4
  • Use VueRouter's addRoutes method to dynamically add user permission routes
  • Detailed explanation of VueRouter advanced navigation hooks and routing meta information
  • Vue Learning - VueRouter Routing Basics

<<:  How to use union all in MySQL to get the union sort

>>:  A practical record of troubleshooting a surge in Redis connections in Docker

Recommend

The concept of MTR in MySQL

MTR stands for Mini-Transaction. As the name sugg...

Vue detailed introductory notes

Table of contents 1. Introduction 2. Initial Vue ...

Vue implements book management case

This article example shares the specific code of ...

Detailed explanation of the construction and use of docker private warehouse

1. Download the repository image docker pull regi...

React sample code to implement automatic browser refresh

Table of contents What is front-end routing? How ...

Example code for css flex layout with automatic line wrapping

To create a flex container, simply add a display:...

How to optimize MySQL deduplication operation to the extreme

Table of contents 1. Clever use of indexes and va...

Detailed explanation of the underlying implementation of descending index, a new feature of MySQL 8

What is a descending index? You may be familiar w...

Solution to the problem of z-index not taking effect in CSS3

I recently wrote a combination of CSS3 and js, an...

Select web page drop-down list and div layer covering problem

Questions about select elements in HTML have been...

Do not start CSS pseudo-class names with numbers

When newbies develop div+css, they need to name t...

N ways to vertically center a div with single/multi-line text (unknown height/fixed height)

When talking about this issue, some people may ask...

Basic ideas and codes for implementing video players in browsers

Table of contents Preface Summary of audio and vi...

Color hexadecimal color code table display and hexadecimal value comparison display for easy search

Hexadecimal code table of various colors [Part 1] ...

Detailed explanation of setting resource cache in nginx

I have always wanted to learn about caching. Afte...