Loading... ## 基本路由切换 步骤： - 设计好导航区和展示区 - 请来路由器 - 制定路由的基本规则 - 写一个一个的vue ### /router/index.ts 首先要创建一个路由器 ```ts import { createRouter, createWebHashHistory } from "vue-router"; //引入要呈现的组件 import dog from "@/components/dog.vue"; import news from "@/components/news.vue"; import home from "@/components/home.vue"; //创建一个路由器 const router=createRouter({ history:createWebHashHistory(), routes:[ { name:"Home", path:'/home',//路径 component:home }, { name:"Dog", path:'/dog',//路径 component:dog }, { name:"news", path:'/news',//路径 component:news }, ] }) //暴露出去 export default router ``` ### main.ts 其次要在main.ts中使用这个路由器 ```ts import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' import router from './router' const app=createApp(App) //使用路由器 app.use(router) app.mount('#app') ``` ### app.vue 在app.vue中使用`router-link`来表明更改页面的按钮使用`router-view`来确定子页面输出的位置 ```vue <template> <h2>Vue路由测试</h2> <br> <div class="nav"> <router-link :to="{name:'Home'}">首页</router-link> <router-link :to="{name:'Dog'}">狗</router-link> <router-link :to="{name:'news'}">新闻</router-link> </div> <br> <div class="view"> <router-view></router-view> </div> </template> <script lang="ts" setup name="test"> </script> <style> </style> ``` 这时运行后就可以看到实现了基本的切换效果   ## 路由器的工作模式 ### history模式 写法：`history:createWebHistory()` - 优点：URL更加美观，不带有`#` - 缺点：后期项目上线需要服务器端进行配置，否则有404 ### Hash模式 写法：`history:createWebHashHistory()` 优点：兼容性好，不需要服务端处理路径 缺点：URL带有`#`不美观，SEO较差 ## 嵌套路由 在index.ts中需要添加嵌套路由的地方添加以下配置 ```vue { name:"news", path:'/news',//路径 component:news, children:[{ name:"detail",//嵌套路由路径 path:'deatil', component:Deatil } ``` 在news.vue里按照上文一样的写法添加路由即可。 ```vue <template> <div class="news"> <ul> <li v-for="t in news"><RouterLink :to="{name:'detail'}">{{ t.title }}</RouterLink></li> </ul> </div> <div class="deatil"> <RouterView></RouterView> </div> </template> <script setup lang="ts" name="news"> import { reactive } from 'vue'; let news=reactive([ {id:'1',title:'震惊！牛嫂出现在宁波',content:'这是人性的扭曲还是道德的沦丧？'}, {id:'2',title:'牛哥换头像了！',content:'为什么呜呜呜'}, {id:'3',title:'牛哥删评论了',content:'防止调查，小丑吗'}, {id:'4',title:'牛哥怎么还不换回来',content:'都过完年了呜呜呜'}, ]) </script> ``` 这时就完成了基本的嵌套路由，但是还需要更多配置来使新闻显示生效。  ## 传参 ### qerey 在进行路由跳转的时候，有时候我们需要传递参数，这个时候我们就需要用到传参。 qerey传参比较简单，只需要在to参数中传递即可。 `<RouterLink :to="{name:'detail',query:{id:t.id,title:t.title,content:t.content}}">{{ t.title }}</RouterLink>` `detail.vue` 之后再引用即可 ``` <template> <li>编号：{{ route.query.id }}</li> <li>标题：{{ route.query.title }}</li> <li>内容：{{ route.query.content }}</li> </template> <script lang="ts" setup name="deatil"> import { useRoute } from 'vue-router'; let route=useRoute() </script> ``` ### params params不是使用？的形式传参，而是使用/ 要使用params，需要先在路由表里定义变量 `index.ts` ```ts { name:"news", path:'/news',//路径 component:news, children:[{ name:"detail", path:'deatil/:id/:title/:content', component:Deatil }] ``` `news.vue` `<RouterLink :to="{name:'detail',params:{id:t.id,title:t.title,content:t.content}}">{{ t.title }</RouterLink>` `detail.vue` 之后直接引用即可 ```vue <template> <li>编号：{{ route.params.id }}</li> <li>标题：{{ route.params.title }}</li> <li>内容：{{ route.params.content }}</li> </template> <script lang="ts" setup name="deatil"> import { useRoute } from 'vue-router'; let route=useRoute() </script> ```  ### props 先是需要再index.ts中添加一项配置 ```vue { name:"news", path:'/news',//路径 component:news, children:[{ name:"detail", path:'deatil/:id/:title/:content', component:Deatil, props:true }] ``` 之后再detail.vue中读取数据 ```vue <template> <li>编号：{{ id }}</li> <li>标题：{{ title }}</li> <li>内容：{{ content }}</li> </template> <script lang="ts" setup name="deatil"> import { useRoute } from 'vue-router'; let route=useRoute() defineProps(['id','title','content']) </script> ``` 这样可以方便的读取数据，避免了过多的`.` ## 跳转方式 ### replace replace就是不可以回退，没有历史记录的模式 ```vue <router-link replace :to="{name:'Home'}">首页</router-link> <router-link replace :to="{name:'Dog'}">狗</router-link> <router-link replace :to="{name:'news'}">新闻</router-link> ```  ### push 默认就是push，可以回退  ## 编程式导航 我们也可以在脚本里进行路由跳转，多用于注册登录等场景 `news.vue` ```vue <template> <div class="news"> <ul> <li v-for="t in news"><button @click="checkNews(news)">显示新闻</button><RouterLink :to="{ name:'detail', params:{ id:t.id, title:t.title, content:t.content } }">{{ t.title }}</RouterLink></li> </ul> </div> <div class="deatil"> <RouterView></RouterView> </div> </template> <script setup lang="ts" name="news"> import { reactive } from 'vue'; import { useRouter } from 'vue-router'; let news=reactive([ {id:'1',title:'震惊！牛嫂出现在宁波',content:'这是人性的扭曲还是道德的沦丧？'}, {id:'2',title:'牛哥换头像了！',content:'为什么呜呜呜'}, {id:'3',title:'牛哥删评论了',content:'防止调查，小丑吗'}, {id:'4',title:'牛哥怎么还不换回来',content:'都过完年了呜呜呜'}, ]) const router=useRouter() function checkNews(t:any){ router.push({name:'detail',params:{id:t.id,title:t.title,content:t.content}}) } </script> ``` `router.push()`中括号里的参数就是`RouterLink`中的`to`参数 ## 重定向 我们的根目录可能并不是主页，这时就需要重定向。只需要在`index.ts`中编写即可 ```ts import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"; //引入要呈现的组件 import dog from "@/components/dog.vue"; import news from "@/components/news.vue"; import home from "@/components/home.vue"; import Deatil from "@/components/deatil.vue"; //创建一个路由器 const router=createRouter({ history:createWebHistory(), routes:[ { name:"Home", path:'/home',//路径 component:home }, { name:"Dog", path:'/dog',//路径 component:dog }, { name:"news", path:'/news',//路径 component:news, children:[{ name:"detail", path:'deatil/:id/:title/:content', component:Deatil, props:true }], }, { path:'/', redirect:'/home' } ] }) //暴露出去 export default router ``` 加入`redirect`即可。 最后修改：2025 年 06 月 02 日 © 允许规范转载 赞 不用打赏哦！