那个网站做外贸好网站收录查询爱站
一、基本使用
安装路由器：
npm i vue-router 新建router文件夹。其中配置路由文件index.ts
在main.ts中引入。
在切换界面引入RouterView作为展示区，RouterLink绑定具体点击事件。
RouterLink组件中to属性表示到那个界面。Active-class表示活动的样式。
配置路由信息：
//引入路由器
import {createRouter,createWebHistory} from 'vue-router'//具体界面
import life from '../components/2_14_life.vue'
import ref from '../components/2_12_ref.vue'const router =createRouter({history:createWebHistory(),routes:[{path:'/one',component:life},{path:'/two',component:ref},]
})export default router
引入路由器：
//创建前端应用
import { createApp } from 'vue'
//引入根文件
import App from './App.vue'
//引入路由
import router from './router'//创建一个应用，根组件为app，且挂在到index.html的id为app的标签上
const app=createApp(App)
//使用路由器
app.use(router)
app.mount('#app')
在具体界面使用：
<template><div><router-link to="/one" active-class="active">界面1</router-link><router-link to="/two" active-class="active">界面2</router-link></div>
<div><router-view></router-view>
</div></template>
<script setup lang="ts">
import {RouterLink,RouterView} from 'vue-router'</script>
<style scoped>.active {color: red;}</style>
二、路由模式
模式：history模式、hash模式。
history模式：URL不带#，接近传统的URL。后期需要配置服务器配合处理路径问题，否则刷
新会有404错误。
history:createWebHistoryHash模式：兼容性好，不需要服务器端处理路径。URL带有#，在SEO优化方面相对较差。
history: createWebHashHistory三、to的两种写法
方式一：字符串写法
<xxx to="/路径"></xxx>方式二：对象写法
<xxx to="{path:'/路径'}"></xxx>四、命名路由
步骤：1、在路由配置文件中的单个路由配置中添加属性name
2、在调用的时候使用to的对象写法（:to="{name: ‘路由名’}"）
配置路由
...
const router=createRouter({history:createWebHistory(),routes:[{name:'life',path:'/one',component:life}]
})
...使用
<router-link :to="{name:'life'}" active-class="active">界面</router-link>五、嵌套路由（子级路由）
步骤：1、在router配置文件中配置：children属性(子级路由path不用”/“开头)。
2、在目标地方配置router-link和router-view。to属性后面需要加上父级路径。
路由配置：
...
routes:[{name:'life',path:'/one',component:life,children:[{path:'child',component:lifex}]}
]
...引用地方：
<router-link to='/one/child' active-class="active">界面</router-link>六、路由传参
1、query
方式：传参与GET请求类似。在to属性的路径尾部加上：?属性名=值&属性名=值……。
方式1：直接在路径里面写
<RouterLink :to="`/new/hom?id=11`&name=${form.name}">方式2：对象写法
<router-link :to="{name:'life',query:{name:111,age:'bbb'}}" active-class="active">界面1</router-link>接收方式：引入useRoute，使用这个对象的query获取参数。
import { useRoute } from 'vue-router';const route = useRoute();
let parems=route.query
2、params
方式1：在路由配置时预留参数占位。
在to属性值中直接将参数写在路径后面。
配置时预留占位
children:[{path:'child/:id/:name',name:'child',component:life}]
传参时写在路径后
<router-link to="/one/child/aaa/bbb" active-class="active">界面2</router-link>使用useRoute进行参数接收
const route = useRoute();
let parems=route.params
方式2：在路由配置时预留参数占位，同时配置name属性。
在to属性使用对象写法，配置name和params。(不能使用path)
路由配置界面省略与方式一一致。
传参代码
<router-link :to="{name:'child',params:{id:1,name:'bbb'}}" active-class="active">界面2</router-link>
接收参数也与方式一一致。
注意: 如果参数是非必要的，在占位后写加问号。
{path:'child/:id/:name?',name:'child',component:life}
七、props配置
1、使用props传递params参数
在路由配置处设置props属性为true，同时在path中也要设置占位符。
接收参数：defineProps([ 'id','name' ])
{path:'child/:id/:name?',name:'child',component:life,props:true}
设置了props=true，背后的逻辑相当于下列写法。
<life id="aa" name="aa"/>2、使用props传递自定义参数
{path:'child',name:'child',component:life,props(route){return {id:route.query.id,name:route.query.name}}}
3、props固定参数
{path:'child',name:'child',component:life,props:{name:'zzz'}}
八、跳转
跳转方式：push、replace。
push：将路由推入栈中，跳转界面后，会有历史记录。（默认）
replace：将路由替换当前路由栈。
设置：
<RouterLink replace :to="{path:'xxx/xxx'}">九、编程式导航
目的：在TS、JS中跳转路由。
方法：引入useRouter。
使用useRouter中的push或者replace方法跳转。
import { useRouter } from 'vue-router';const router=useRouter()router.push("/xxx")router.push({name:"xxx",params:{id:1}})router.replace("/xxx")router.replace({name:"xxx",params:{id:1}})
十、重定向
作用：设置从一个界面自动跳转到另一个界面。（比如设置项目进去的第一个路由界面）
方法：在路由配置的界面设置redirect。
const router =createRouter({history:createWebHistory(),
routes:[
//设置重定向{path:'/',redirect:'/one'},]
})