Home > Article > Web Front-end > 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"]
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.
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);
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} })
The typical feature of Hash mode is that the page route contains a pound sign.
const router = createRouter({ history: createWebHashHistory(), routes: [ ..., ], })
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
Configure the name attribute when defining the route
{ path: '/news', component: News,name:"news" }
Pass in the object to jump
<router-link :to="{name: 'news'}">新闻</router-link>
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: 'content',query: {aid: index}}"> {{item}}</router-link> </li>
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: 'userinfo',params: {id: 123}}">跳转到用户详情</router-link>
is very similar to the above method.
<button @click="this.$router.push({name: 'userinfo',params: {id: 666}})">点击跳转</button>
{ path: '', redirect: "/home" }, // 路由重定向 { path: '/home', component: Home },
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' }
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!