vue3对应vue-router4
先安装最新版的vue-router
pnpm i vue-router在src目录下新建router文件夹，在其下创建index.js文件
在index.js文件下写
// 创建一个路由器，并暴露出去
// 第一步：引入createRouter
import {createRouter,createWebHashHistory} from 'vue-router'
// 引入组件
import Consult from '../components/Consult.vue'
import ConsultPage from '../components/ConsultPage.vue'
import TweetsShowDea from '../components/TweetsShowDea.vue'
import QuestionShowMsg from '../components/QuestionShowMsg.vue'
// 第二步：创建路由器
const router=createRouter({
// 工作模式
history:createWebHashHistory(),
routes:[
// 阅读
{
// 路径
path:'/TweetsShowDea',
// 组件
component: TweetsShowDea
},
// 问答
{
// 路径
path:'/QuestionShowMsg',
// 组件
component: QuestionShowMsg
},
// 心理咨询
{
// 路径
path:'/ConsultPage',
// 组件
component: ConsultPage
},
// 咨询师详情
{
// 路径
path:'/Consult',
// 组件
component: Consult
}
]
})
export default router在main.js文件中引入router文件夹中的index.js
// 引入router
import router from "./router";
// 使用路由器
app.use(router);路由器工作模式
路由的三种写法
router-index.js
routes:[
// 首页
{
// 路径
path:'/Home',
// 组件
component: Home
},
// 阅读
{
name:'yuedu',
// 路径
path:'/TweetsShowDea',
// 组件
component: TweetsShowDea
},
// 问答
{
// 路径
path:'/QuestionShowMsg',
// 组件
component: QuestionShowMsg
}
]app.vue
<el-menu-item index="1">
<RouterLink to="/Home">首页</RouterLink>
</el-menu-item>
<el-menu-item index="2">
<RouterLink :to="{ name:'yuedu'}">阅读</RouterLink>
</el-menu-item>
<el-menu-item index="3">
<RouterLink :to="{path:'/QuestionShowMsg'}">问答</RouterLink>
</el-menu-item>route传参
query方式
传参方
第一种写法：to的直接写法
第二种写法：path
第三种写法：name
接受方
第一种写法
第二种写法：直接从route上解构赋值，但是解构赋值后会时区响应式，所以引入toRefs
params方式
定义路由时先占位
在参数后面加上问号？表示有则传没则不传，避免报错参数丢失
传参方
第一种写法
第二种写法：name只写子路由的name
接受方
路由的props配置
第一种写法：将路由收到的所有params参数作为props传给路由组件
每次从route中解构赋值太过于麻烦，在路由中配置props属性，赋值为true
则相当于
第二种写法：函数写法，可以自己决定将什么作为props给路由组件
第三种写法：对象写法，可以自己决定将什么作为props给路由组件，但是只能传死数据
路由replace和push
默认是push，可以实现页面的前进和后退
想要替换成replace：每次都是进行页面替换，不能前进后后退看到历史页面
在routerlink标签内加上replace属性即可
编程式路由导航
脱离routerlink实现页面跳转：输入正确用户名和密码跳转个人中心
复杂式
重定向（默认展示首页）
// 重定向
{
path:'/',
redirect:'/Home'
}
