安装配置
- 执行命令npm install vue-router安装
- 在src下创建router目录，在router目录里面创建index.js
- 在index.js中写入以下内容
import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue'//导入页面 const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: function () { return import('../views/AboutView.vue')//所跳转的路由 } } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router//导出路由
- 在main.js中导入并使用路由
let app = createApp(App); app.use(router).mount('#app')
- 在App.vue中写
<template> <router-view/><!-- 这是路由出口 --> </template>
页面跳转及传参
1.标签写法
使用<router-link>跳转,<router-link> 默认会被渲染成一个 `<a>` 标签
- <router-link to="/btn">通过to指定链接</router-link>
- <router-link :to="{ path:'/btn'} ">根据path跳转</router-link>
- <router-link :to="{ name:'user'} ">根据name跳转</router-link>
2. 编程式写法
router.go()、router.push()、router.replace()
router.go()类似于js的history.go(),0刷新,正数前进,负数后退
router.push()在历史堆栈中添加路由，
- router.push('/')
- router.push({path:'/'})
- router.push({name:'home'})
router.replace()替换历史堆栈中当前路由
示例：
import { useRouter } from 'vue-router' export default { setup() { const router = useRouter(); router.push('/home'); } }
3.动态路由
路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来
使用：在路由处配置
{ path:'/about/:id', name:'about', component:About },
