1. Install router
npm i vue-router
2. Route jump
2.1 Create routing instance
srcCreateroutera folder under the directory, create a file in it ,index.jsand create a routing instance. Create an object
throughvue-routerthe method . Among them are andcreateRouterrouterhistoryroutes
1.history：
- History is an object provided by the front-end routing library, which is responsible for managing the status and navigation of browser history.
- It can control the browser's history through push, replace, go and other methods. And update the display content of the current page accordingly.
- Depending on the type of routing used, the history object can be the browser's native window.history, or a custom object created by functions such as createBrowserHistory and createHashHistory.
2.routes：
- routes represents routing configuration, specifying the components corresponding to different URLs and other attributes.
- Routing configuration is generally organized in a tree structure. Each route contains a path and a corresponding routing component.
- In the routing system, the corresponding components can be rendered according to the matched URL path, thereby realizing page switching and navigation.
- By configuring different routing rules, different pages and navigation logic of the application can be built.
src/router/index.js
/**
* 路由文件
*/
//引入router
import {
createRouter, createWebHistory } from 'vue-router'
// 定义路由组件路径
/*
这里的path和name都是自定义命名
*/
const routes = [
{
name: 'login',
path: '/login',
component: () => import('../components/login.vue')
}, {
name: 'registry',
path: '/registry',
component: () => import('../components/registry.vue')
}
];
// 创建Router对象
const router = createRouter({
history: createWebHistory(),
routes
})
// 导出对象
export default router;
2.2 Mount routing instance
main.js
import {
createApp } from 'vue'
import App from './App.vue'
// 引入全局路由
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')
2.3 Create page components
login.vue
<template>
<div class="login">
<h1>我是login页面</h1>
</div>
</template>
export default {
name: 'login',
setup() {
return {
}
}
}
registry.vue
<template>
<div>
<h1>我是registry页面</h1>
</div>
</template>
export default {
name: 'registry',
setup() {
return {
}
}
}
2.4 Jump through router-link
In Vue Router,
<router-view>a component used as a route placeholder. It is a special tag placed in the Vue application template to render the currently active routing component. When using Vue Router for routing management, you can define different paths and corresponding components in the routing configuration. When users access different paths,<router-view>content will be automatically displayed based on the components matched by the current path.
<router-view>Routing addresses and components can be mapped and used<router-link>to jump to pages. Itstoproperties can jump to the corresponding componentpathto displaypathitcomponent.
app.vue
<template>
<h1>路由跳转</h1>
<div>
<!-- 通过路由name、path完成跳转 -->
<router-link :to="{name:'login'}">login</router-link>
<span>------------</span>
<router-link to="/registry">registry</router-link>
<router-view ></router-view>
</div>
</template>
2.5 Jump through js method
<script setup>
import {
useRouter} from 'vue-router'
const router = useRouter();
// 通过路由path跳转
const toLink = (path) => {
router.push(path)
}
// 通过路由name跳转
const toLink1 = (name) => {
router.push({
name:name})
}
</script>
<template>
<div class="btn">
<!-- 通过js方法完成路由跳转 -->
<button @click="toLink('/login')">按钮1--->login</button>
<button @click="toLink1('registry')">按钮2--->registry</button>
</div>
</template>
3. Routing parameters
3.1 query
<script setup>
import {
useRouter,useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();
// 通过路由传参
const toLink2 = (path) => {
router.push({
name: path,
query:{
name:'zhangsan',pwd:'123456'}
})
// 截取路由参数
console.log(rouet.query);
}
</script>
<template>
<h1>路由传参</h1>
<div class="btn">
<!-- 通过路由传参 -->
<button @click="toLink2('registry')">to registry</button>
</div>
</template>
3.2 params
First modify the value of path, then use params to pass parameter
router/index.js
{
name: 'login',
path: '/login',
component: () => import('../components/login.vue')
}, {
name: 'registry',
path: '/registry/:name', // 使用param需要修改path的形式
component: () => import('../components/registry.vue')
}
app.vue
<script setup>
import {
useRouter,useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();
// 通过路由传参
const toLink3 = (path) => {
router.push({
name: path,
params:{
name:'lisi'}
})
console.log(route.params);
}
</script>
<template>
<h1>路由传参</h1>
<div class="btn">
<!-- param -->
<button @click="toLink3('registry')">param</button>
</div>
</template>
4. Route nesting
Vue's routing nesting refers to organizing multiple sub-routes into a hierarchical structure in a routing configuration. This allows for better management and organization of complex application pages. To create a nested route, you need to define a child route in the parent route and use
<router-view>a label inside the component to display the content of the child route.
/**
* 路由文件
*/
//引入router
import {
createRouter, createWebHistory } from 'vue-router'
// 定义路由组件路径
const routes = [
{
path: '/',
redirect: {
path: '/home' }, // 重定向到path为 home 的路由
},
{
name: 'home',
path: '/home',
component: () => import('../components/home.vue'),
children: [
{
name: 'login',
path: '/home/login',
component: () => import('../components/login.vue')
}, {
name: 'registry',
path: '/home/registry',
component: () => import('../components/registry.vue')
}
]
},
];
home.vue
<template>
<div>
<div>导航栏组件</div>
<hr>
<router-link to="/home/login">去login页</router-link>
<span> </span>
<router-link to="/home/registry">去registry页</router-link>
<hr>
<router-view />
</div>
</template>
app.vue
<script setup>
</script>
<template>
<h1>嵌套路由</h1>
<router-view ></router-view>
</template>
5. Route redirection
In Vue Router, routing redirection refers to redirecting users to another path when they visit a certain path.
redirectThis can be achieved through properties in the routing configuration .
const routes = [
{
path: '/',
redirect: '/home' // 当用户访问根路径'/'时，重定向到'/home'
},
{
path: '/home',
component: Home
}
]