Vue3 Router-基础1
一、 安装
npm install vue-router@4
二、基础使用
定义路由
router.js
import { createRouter,createWebHashHistory} from 'vue-router' import About from '../components/About.vue' const routes = [ { path: '/about', component: About }, //{ path: '/home', component: Home }, ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router
注册路由
main.js
import { createApp } from 'vue' import App from './App.vue' import router from './router/index.js' createApp(App).use(router).mount('#app')
使用路由
App.vue
<template> <!-- 创建超链接 可以在不重新加载页面的情况下更改URL--> <router-link to="/about">Go to About</router-link> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </template>
三、 动态路由匹配
1.基本的动态路由
使用 '/xxx/:id' 的方式可以匹配 /xxx路径,:id可以由目标路径模板{{$route.params.id }}参数获得
路由配置
{ path: '/user/:id', component: User }
跳转前
<router-link to="/user/123">跳转到user</router-link>
跳转后接收
<template>
<div>User: {{ $route.params.id }}</div>
</template>
2.多个路径参数
路由配置
{ path: '/user/:id/post/:code', component: User }
跳转前
<router-link to="/user/123/post/456">跳转到user</router-link>
跳转后接收
<template> <div>User: {{ $route.params.id }}</div> <div>Post: {{ $route.params.code }}</div> </template>
3.路由的参数变化
???????????
<script> export default { created() { this.$watch( () => this.$route.params, (toParams, previousParams) => { // 对路由变化做出响应... console.log('跳转到:'); console.log(toParams); console.log('从跳转'); console.log(previousParams); } ) } } </script>
4.捕获所有路由或 404 Not found 路由
路由配置
{ path: '/:pathMatch(.*)*',component: NotFound }
跳转前
<router-link to="/abc/def">跳转</router-link>
跳转后接收
<template>
<div>404Page: {{ $route.params.pathMatch }}</div>
</template>
四、路由匹配的语法
1.自定义参数的正则
//匹配任意数量的数字, \d表示数字, +表示出现1次或多次 //http://localhost:3000/124 符合 //http://localhost:3000/12d 不符合 { path: '/:id(\\d+)', component: User }
2.参数可重复
+ 匹配一个或多个, *匹配0个或多个
//http://localhost:3000/a/b/c/d { path: '/:id+', component: User }
获得数组
<template> <div>User: {{ $route.params.id }}</div> </template>
3.可选参数
?表示 0次或者1次
{ path: '/:id?', component: User }
五、嵌套路由
路由配置
import User from '@/components/User.vue'
import UserA from '@/components/UserA.vue'
import UserB from '@/components/UserB.vue'
const routes = [ { path: '/about', component: About }, { path: '/user/:id?', component: User, //这里的渲染到子router-view children:[ { path: 'A', component: UserA, }, { path: 'B', component: UserB, } ] }, ]
User.vue
<template> <div>User: {{ $route.params.id }}</div> <router-view></router-view> </template> <script>
UerA.vue
<template> <div>UserA: {{ $route.params.id }}</div> <router-view></router-view> </template>