Let’s talk about routing in Vue3 and briefly analyze routing configuration methods

This article will take you through routing in Vue3 and talk about the basic configuration of routing, dynamic routing configuration, routing mode, routing redirection, etc. I hope it will be helpful to you.

[Related recommendations: "vue.js Tutorial"]

Basic configuration of routing

1. Install the plug-in

npm install vue-router@next --save

2, create a routers.ts file

3, introduce components in routers.ts and configure the path.

import { createRouter,createWebHashHistory } from 'vue-router';
// 引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import User from './components/User.vue';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {path: '/', component: Home},
    {path: '/news', component: News},
    {path: '/user', component: User},
  ]
})

export default router;

4. Mount the routing file to vue in main.ts.

import { createApp } from 'vue'
import App from './App.vue'
import routers from './routers';

// createApp(App).mount('#app')

const app = createApp(App);
app.use(routers);
app.mount('#app');

5. After the component that uses routing mounts router-link through the router-view component or router-link

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <ul>
    <li>
      <router-link to="/">首页</router-link>
    </li>
    <li>
      <router-link to="/news">新闻</router-link>
    </li>
    <li>
      <router-link to="/user">用户</router-link>
    </li>
  </ul>

  <router-view></router-view>
</template>

, you only need to go to the page path corresponding to the component. Enter the specified route to complete the jump, and router-link implements routing in the form of a tag for jump.

Configuration of dynamic routing

Configure routing in routes.ts as follows, and configure dynamic routing through /:aid.

//配置路由
const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        { path: '/', component: Home , alias: '/home' },
        { path: '/news', component: News },
        { path: '/user', component: User },
        { path: '/newscontent/:aid', component: NewsContent },
    ], 
})

When jumping through router-link, a template string and colon + to are required.

<ul>
    <li v-for="(item, index) in list" :key="index">
        <router-link  :to="`/newscontent/${index}`"> {{item}}</router-link>
    </li>
</ul>

Get the value passed by dynamic routing through this.$route.params.

mounted(){
    // this.$route.params 获取动态路由的传值
    console.log(this.$route.params)
}

If we want to achieve a value transfer similar to GET, we can use the following method

1. Configure the route as a normal route.

const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        { path: '/', component: Home , alias: '/home' },
        { path: '/news', component: News },
        { path: '/user', component: User },
        { path: '/newscontent', component: NewsContent },
    ], 
})

2. Router-link jumps in the form of question marks.

<router-link  :to="`/newscontent?aid=${index}`"> {{item}}</router-link>

3. Get the get value through this.$route.query.

console.log(this.$route.query);

Routing programmatic navigation (JS jump routing)

Just need to specify it through this.$router.push.

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

If you want to implement get value transfer, you can use the following method.

this.$router.push({
    path: '/home',
    query: {aid: 14}
  })
}

Dynamic routing needs to use the following method.

  this.$router.push({
    path: '/home/123',
    // query: {aid: 14}
  })

Routing mode

Hash mode

The typical feature of Hash mode is that the page route contains a pound sign.

const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        ...,
    ], 
})

HTML5 history mode

• Introduces createWebHistory.

• The history attribute in the router's configuration item is set to createWebHistory().

import { createRouter, createWebHistory } from 'vue-router'

//配置路由
const router = createRouter({
    history: createWebHistory(),
    routes: [
        ...
    ], 
})

Note: After turning on HTML5 History mode, you need to configure pseudo-static when publishing to the server.

Configuring pseudo-static method:

https://router.vuejs.org/zh/guide/essentials/history-mode.html#Backend configuration example

Named routing

General situation

• Configure the name attribute when defining the route

{ path: '/news', component: News,name:"news" }

• Pass in the object to jump

<router-link :to="{name: &#39;news&#39;}">新闻</router-link>

Pass the value through GET

• When defining the route, configure the name attribute

{ path: '/newscontent', component: NewsContent, name: "content" },

• Pass in the object including query

<li v-for="(item, index) in list" :key="index">
    <router-link  :to="{name: &#39;content&#39;,query: {aid: index}}"> {{item}}</router-link>
</li>

Through dynamic Routing method

• Define dynamic routing and specify the name attribute

{ path: '/userinfo/:id', name: "userinfo", component: UserInfo }

• Pass in the object including params

<router-link :to="{name: &#39;userinfo&#39;,params: {id: 123}}">跳转到用户详情</router-link>

Programmatic routing

is very similar to the above method.

<button @click="this.$router.push({name: &#39;userinfo&#39;,params: {id: 666}})">点击跳转</button>

Route redirection

{ path: '', redirect: "/home" },   // 路由重定向
{ path: '/home', component: Home },

Route alias

In the following example, accessing the people route is the same as accessing the alias route.

{ path: '/user', component: User, alias: '/people' }

alias can also be an array.

{ path: '/user', component: User, alias: ['/people','/u']}

Form of dynamic routing.

{ path: '/userinfo/:id', name: "userinfo", component: UserInfo, alias: '/u/:id' }

Nested routing

The application scenario of nested routing is generally on the navigation bar.

• Define nested routing

{
  path: '/user', component: User,
  children: [
    { path: '', redirect: "/user/userlist" },
    { path: 'userlist', component: UserList },
    { path: 'useradd', component: UserAdd }
  ]
}

• router-link and router-view display content together

<div class="left">
  <ul>
    <li>
      <router-link to="/user/userlist">用户列表</router-link>
    </li>
    <li>
      <router-link to="/user/useradd">增加用户</router-link>
    </li>
  </ul>
</div>
<div class="right">
  <router-view></router-view>
</div>

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Let’s talk about routing in Vue3 and briefly analyze routing configuration methods. For more information, please follow other related articles on the PHP Chinese website!