vue3路由

1. 路由

对路由的理解：

1. 路由就是一组key-value的对应关系
2. 多个路由，需要经过路由器管理

1.1 基本效果切换

下载：

npm i vue-router

路由配置文件代码：

// 创建一个路由并暴露出去// 1：引入createRouterimport{createRouter,createWebHistory}from"vue-router";// 引入组件import Home from"@/components/Home.vue";import News from"@/components/News.vue";// 2.创建路由器const router =createRouter({history:createWebHistory(),//路由器的工作模式routes:[//一个一个的路由规则{path:'/',component:Home,},{path:'/about',component:News,}]})exportdefault router;

main.ts引入路由

import router from'./router/index'createApp(App).use(router).mount("#app");

App.vue代码：

<template><div class="app"><h2>路由测试</h2><div class="nav"><RouterLink to="/Home" active-class="change">首页</RouterLink><RouterLink to="/News" active-class="change">新闻</RouterLink><RouterLink to="/About" active-class="change">关于</RouterLink></div><div class="main-content"><RouterView /></div></div></template><script lang="ts" name="App" setup>import{ RouterLink,RouterView }from"vue-router";</script>

1.2 两个注意点

1. 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
2. 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

路由组件：靠路由规则渲染出来的。

route:[{path:/demo,component:demo}]

一般组件：亲手写出来的标签。

<demo/>

1.3 路由器的工作模式

1. history模式

优点：URL更加美观，不带有#，更接近传统的网站URL。
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

const router =createRouter({history:createWebHistory(),//history模式/******/})

各版本：
vue2——mode:‘history’
vue3——history:createWebHistory()
React——BrowserRouter

2. hash模式

优点：兼容性更好，因为不需要服务器端处理路径。
缺点：URL带有#不太美观，且在SEO优化方面相对较差。

const router =createRouter({history:createWebHashHistory(),//hash模式/******/})

1.4 命名路由

作用：可以简化路由跳转及传参
给路由规则命名：

routes:[{name:'zhuye',path:'/home',component:Home
  },{name:'xinwen',path:'/news',component:News,},{name:'guanyu',path:'/about',component:About
  }]

1.5 to的两种书写方式（跳转路由）

<!-- 第一种：to的字符串写法 --><RouterLink active-class="active" to="/home">主页</router-link><!-- 第二种：to的对象写法 --><!--to写法(通过路径）--><RouterLink active-class="active":to="{path:'/home'}">Home</router-link><!--to写法(通过名称）--><RouterLink active-class="active":to="{name:'home'}">Home</router-link>

1.6 嵌套路由

News的子路由Detail.vue

routes:[//一个一个的路由规则{path:'/home',component:Home,},{path:'/about',component:About,},{path:'/news',component:News,children:[{path:'detail',component:Detail
                }]}]

跳转路由（记得要加完整路径）：

<RouterLink to="/news/detail">xxxx</RouterLink><!-- 或 --><RouterLink :to="{path:'/news/detail'}">xxxx</RouterLink>

1.7 路由传参

1.query参数

news.vue
<template><div class="news"><!-- 导航区 --><ol><li v-for="item in newList":key="item.id"><!-- 跳转并携带query参数（to的对象写法） --><RouterLink :to="{name:'detail',query:{id:item.id,title:item.title,content:item.content,}}">{{ item.title }}</RouterLink></li></ol><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div></div></template><script setup lang="ts" name="News">import{ reactive }from'vue';import{ RouterLink,RouterView }from"vue-router";let newList=reactive([{id:'aaa01',title:"如何一夜暴富",content:'一夜暴富了谁还在这敲代码啊'},{id:'aaa02',title:"震惊！万万没想到",content:'对不起我是个标题党。。。。。'},{id:'aaa02',title:"如何抗癌",content:'多吃西兰花多吃西兰花多吃抗癌食物'},{id:'aaa03',title:"好消息",content:'为什么明天不是周末！为什么明天不是周末！为什么明天不是周末！为什么明天不是周末！'},{id:'aaa04',title:"学it月薪过万",content:'好难学好难学好难学好难学好难学好难学好难学好难学好难学好难学好难学好难学好难学好难学好难学好难学好难学好难学好难学好'},])</script>

detail.vue
<template><ul><li>编号:{{ query.id }}</li><li>标题:{{ query.title }}</li><li>内容:{{ query.content }}</li></ul></template><script lang="ts" setup name="Detail">import{ toRefs }from'vue';import{ useRoute }from'vue-router';const route =useRoute();const{query}=toRefs(route);</script>

2. params参数

传递参数

<!-- 跳转并携带params参数（to的字符串写法） --><RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink><!-- 跳转并携带params参数（to的对象写法） --><RouterLink 
  :to="{name:'xiang',//用name跳转params:{id:news.id,title:news.title,content:news.title
    }}"
>{{news.title}}</RouterLink>

接收参数：

import{useRoute}from'vue-router'const route =useRoute()// 打印params参数
console.log(route.params)

1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。
2：传递params参数时，需要提前在规则中占位。path: ‘/news/detail/🆔title:content?’

1.8 路由的props配置

作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

{name:'xiang',path:'detail/:id/:title/:content',component:Detail,// props的对象写法（基本不用），作用：把对象中的每一组key-value作为props传给Detail组件props:{a:1,b:2,c:3},// props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件props:true// props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件props(route){return route.query
  }}

<template><ul><li>编号:{{ id }}</li><li>标题:{{ title }}</li><li>内容:{{ content }}</li></ul></template><script lang="ts" setup name="Detail">defineProps(['id','title','content']);</script>

1.9 replace属性

作用：控制路由跳转时操作浏览器历史记录的模式。

浏览器的历史记录有两种写入方式：分别为push和

push是追加历史记录（默认值）。
replace是替换当前记录。

开启replace模式：

<RouterLink replace .......>News</RouterLink>

1.10 编程式路由导航

编程式路由导航：脱离

<RouterLink>

实现页面跳转
实现场景：登录成功跳转页面；鼠标划过就跳转…
路由组件的两个重要的属性：

$route

和

$router

变成了两个hooks

<li v-for="item in newList":key="item.id"><RouterLink :to="{}">{{ item.title }}</RouterLink><button @click="show(item)">查看新闻</button></li><script setup lang="ts" name="Home">import{ onMounted }from'vue';import{ useRouter }from'vue-router';const router =useRouter();onMounted(()=>{setTimeout(()=>{// 1.挂载3秒后实现页面跳转
        router.push('/news')},3000)})//2.点击按钮实现跳转   (NewsInter是自定义的泛型)functionshow(item:NewsInter){// to怎么写这里就怎么写
    router.replace({name:'detail',query:{id:item.id,title:item.title,content:item.content,}})}</script>

1.11 重定向

作用：将特定的路径，重新定向到已有路由。

{path:'/',redirect:'/about'}