Router_路由重定向和其他小细节问题

路由重定向

在routes中编辑如下内容即可

router.js

// 导入创建路由对象需要使用的函数import{createRouter,createWebHashHistory}from'vue-router'// 导入.vue组件import Home from'../components/Home.vue'import List from'../components/List.vue'import Update from'../components/Update.vue'import Add from'../components/Add.vue';// 创建一个路由对象const router=createRouter({// history属性用于记录路由的历史history:createWebHashHistory(),// 用于定义多个不同的路径和组件之间的对应关系routes:[{path:"/home",component:Home},{path:"/list",component:List},{path:"/add",component:Add},{path:"/update",component:Update},{path:"/",component:Home},{path:"/showAll",redirect:"/list"}]})// 向外暴露routerexport default router

App.vue

<script setup></script><template><div>App开始的内容<br><router-link to="/home">home页</router-link><br><router-link to="/list">list页</router-link><br><router-link to="/update">update页</router-link><br><router-link to="/add">add页</router-link><br><router-link to="/showAll">showAll页</router-link><hr><!--该标签会被替换成具体的.vue--><router-view></router-view><hr>App结束的内容</div></template><style scoped></style>

main.js

import{createApp}from'vue'// import './style.css'import App from'./App.vue'// 在整个App.vue中可以使用路由import router from'./routers/router.js'const app=createApp(App)app.use(router)app.mount('#app')

Update.vue

<script setup></script><template><div><router-link to="/list">list页</router-link><br><h1>Update</h1></div></template><style scoped></style>

List.vue

<script setup></script><template><div><router-link to="/home">home页</router-link><br><h1>List</h1></div></template><style scoped></style>

Home.vue

<script setup></script><template><div><router-link to="/add">add页</router-link><br><h1>Home</h1></div></template><style scoped></style>

Add.vue

<script setup></script><template><div><router-link to="/update">update页</router-link><br><h1>Add</h1></div></template><style scoped></style>

一个视图上是可以同时存在多个router-view

App.vue

<script setup></script><template><div>App开始的内容<br><router-link to="/home">home页</router-link><br><router-link to="/list">list页</router-link><br><router-link to="/update">update页</router-link><br><router-link to="/add">add页</router-link><br><router-link to="/showAll">showAll页</router-link><hr><!--该标签会被替换成具体的.vue--><!--一个视图上是可以同时存在多个router-view 每个router-view都可以设置专门用于展示哪个组件--><router-view></router-view>home页<router-view name="homeView"></router-view><br>list页<router-view name="listView"></router-view><br>add页<router-view name="addView"></router-view><br>update页<router-view name="updateView"></router-view><br><hr>App结束的内容</div></template><style scoped></style>

router.js

// 导入创建路由对象需要使用的函数import{createRouter,createWebHashHistory}from'vue-router'// 导入.vue组件import Home from'../components/Home.vue'import List from'../components/List.vue'import Update from'../components/Update.vue'import Add from'../components/Add.vue';// 创建一个路由对象const router=createRouter({// history属性用于记录路由的历史history:createWebHashHistory(),// 用于定义多个不同的路径和组件之间的对应关系routes:[{path:"/home",components:{default:Home,homeView:Home}},{path:"/list",components:{default:List,listView:List}},{path:"/add",components:{default:Add,addView:Add}},{path:"/update",components:{default:Update,updateView:Update}},{path:"/",component:Home},{path:"/showAll",redirect:"/list"}]})// 向外暴露routerexport default router