对于Vue3中的路由
一般来说，页面并不是一个静态的，而是会根据不同的按钮，指向不同的路由，从而展示不同的模板。
就比如
分为了导航区域和展示区域，根据导航区域点击的位置，去展示不同的路由页
那么为了支持路由选择，我们需要先创建一个路由器。
我们先准备三个vue。
再其次是创建一个router，进行路由展示
在index.ts之下，进行代码的书写，首先是createRouter
import {createRouter,createWebHistory} from ‘vue-router’
之后是引入要呈现的组件
import Home from ‘@/components/Home.vue’
import News from ‘@/components/News.vue’
import About from ‘@/components/About.vue’
然后是创建一个Router，需要传入两个，一个路由器的工作模式
一个是多个路由规则
| const router = createRouter({
history:createWebHistory(), //路由器的工作模式（稍后讲解） routes:[ //一个一个的路由规则 { path:’/home’, component:Home }, { path:’/news’, component:News }, { path:’/about’, component:About }, ] }) |
最后暴露出去
export default router
之后就可以使用这个router了
想要使用这个路由器，需要挂载到最外层的main.ts之中
// 创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到app容器中
app.mount(‘#app’)
然后我们就可以进行相关的使用了
只不过在使用的时候，需要先进行引用
import {RouterLink,RouterView} from ‘vue-router’
<div class=”navigate”>
<RouterLink to=”/home” active-class=”active”>首页</RouterLink>
<RouterLink to=”/news” active-class=”active”>新闻</RouterLink>
<RouterLink to=”/about” active-class=”active”>关于</RouterLink>
<div/>
在展示区域，进行视图的展示
<div class=”main-content”>
<RouterView></RouterView>
</div>
这里需要注意两点：
- 路由组件通常需要放在pages或者views文件夹中，一般组件需要放在components文件夹中。
- 在页面，进行路由切换的时候，实际上是在进行卸载和挂载。
其次是路由器的工作模式，有两种，分别是history模式和hash模式
对于历史模式
URL美观，不带#，接近传统的网站URL。不过需要后端进行配合处理路径文件
对于Hash模式
则是兼容性更好，不需要服务器端处理路径
URL带有#不美观。
切换就是在创建router的时候，指定的history模式
const router = createRouter({
history:createWebHistory(), //history模式
/******/
})
const router = createRouter({
history:createWebHashHistory(), //hash模式
/******/
})
其次是在 RouterLink标签中的使用，如果想要指定使用router中哪个路径，有两种使用方法。
<router-link active-class=”active” to=”/home”>主页</router-link>
其次是
<router-link active-class=”active” :to=”{path:’/home’}”>Home</router-link>
这种方法可以使用path，或者name都可以
对于name，则是在路由器的配置规则中，可以声明name
routes:[
{
name:’zhuye’,
path:’/home’,
component:Home
},
{
name:’xinwen’,
path:’/news’,
component:News,
},
{
name:’guanyu’,
path:’/about’,
component:About
}
]
Router之中还支持配置重定向，比如我们可以设置当用户进入的时候，默认重定向到/home
{
path: ‘/’,
redirect: ‘/home’
}
除此之外是嵌套路由
我们可以在一个Router之中，声明嵌套路由
| const router = createRouter({
history:createWebHistory(), routes:[ { name:’zhuye’, path:’/home’, component:Home }, { name:’xinwen’, path:’/news’, component:News, children:[ { name:’xiang’, path:’detail’, component:Detail } ] }, { name:’guanyu’, path:’/about’, component:About } ] }) |
在最后，我们就可以在组件之中声明使用这个子路由
| <template>
<div class=”news”> <!– 导航区 –> <ul> <li v-for=”news in newsList” :key=”news.id”> <RouterLink to=”/news/detail”>{{news.title}}</RouterLink> </li> </ul> <!– 展示区 –> <div class=”news-content”> <RouterView></RouterView> </div> </div> </template> |
然后我们考虑如何在内部跳转路由的同时，携带参数这个问题
常见的方式有两种，一种是利用query，一种是利用param
对于利用query的方式
最简单的是直接进行拼接
<!– 导航区 –>
<ul>
<li v-for=”news in newsList” :key=”news.id”>
<!– 第一种写法 –>
<RouterLink :to=”`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`”>{{news.title}}</RouterLink>
</li>
</ul>
如果想要在子路由之中使用这些参数，那么可以使用useRoute函数
import {useRoute} from ‘vue-router’
然后利用 useRoute函数进行接手
const route = useRoute()
然后就可以从结构体中获取到传入的参数
但是需要注意，这样直接使用route，获取到的数据不是响应式的，需要我们进行相关的修改，利用toRefs
let {query} = toRefs(route)
除了这种直接拼接方式，还可以在RouterLink标签中的其他方法进行传入
<RouterLink
:to=”{
//name:’xiang’, //用name也可以跳转
path:’/news/detail’,
query:{
id:news.id,
title:news.title,
content:news.content
}
}”
>
{{news.title}}
</RouterLink>
除了这种方式，还可以通过param进行传入参数
那么params的传参类似
<RouterLink
:to=”{
name:’xiang’, //用name跳转
params:{
id:news.id,
title:news.title,
content:news.title
}
}”
>
{{news.title}}
</RouterLink>
这样接收的时候
也是利用toRefs进行接收即可。
不过需要注意，对于params的使用时
需要搭配RouterLink中name路由来使用。
那么再说完如何使用pararm和query路径的方式给路由传值之后，我们可以看下另一个语法糖，使用props来将参数传递给路由
一般我们声明的子路由的格式如下
{
name:’xinwen’,
path:’/news’,
component:News,
children:[
{
path:’detail’,
component:Detail
}
]
},
如果希望将参数传递给子路由，可以直接在子路由的component下增加属性 props:true
这种情况下，路由会将所有的params参数作为props传递给子路由
这样在子路由之中，我们可以利用defineProps来获取相关的属性，作为响应式数据。
<script setup lang=”ts” name=”About”>
defineProps([‘id’,’title’,’content’])
</script>
除了这种直接声明props为true来进行传递之外。
我们还可以通过函数的方式，将自己的范围域内的变量传递给子路由
| routes:[ //一个一个的路由规则
{ name:’zhuye’, path:’/home’, component:Home }, { name:’xinwen’, path:’/news’, component:News, children:[ { name:’xiang’, path:’detail’, component:Detail, // 第一种写法：将路由收到的所有params参数作为props传给路由组件 // props:true, // 第二种写法：函数写法，可以自己决定将什么作为props给路由组件 props(route){ return route.query } // 第三种写法：对象写法，可以自己决定将什么作为props给路由组件 /* props:{ a:100, b:200, c:300 } */ } ] }, { name:’guanyu’, path:’/about’, component:About } ] |
最后还有一种奇葩的写法，就是在路由之中，强制声明固定的属性
props:{
a:100,
b:200,
c:300
}
最后说下如何控制浏览器的历史记录和路由跳转的搭配。
一般来说，在浏览器的历史记录中存在两种写入方式，分别是push和replace
Push就是正式的将这一个路由的访问记录压入历史访问记录栈之中。
而replace则是替换当前记录
对于replace模式的开启
则是在RouterLink之中，设置标签属性
<RouterLink replace …….>News</RouterLink>
<RouterLink replace to=”/home” active-class=”active”>首页</RouterLink>
除此之外，我们都是拿着RouterLink在代码的模板之中进行书写，从而进行路由跳转的，对于这种方式，虽然可以满足很多需求，但是并不能满足编程的全部需求。
如果需要在脚本中以编程的方式进行跳转的话，则可以考虑使用Vue提供的函数useRouter
比如我们希望用户进入当前页面之后，检测用户是否进行登陆，来展示不同的页面
这时候就可以利用useRouter和onMounted进行实现。
const router = useRouter()
onMounterd(() =>{
setTimeout(()=>{
router.push(‘/news’)
},3000)
})
而关于这个useRouter，除了最基本的路由跳转的使用方式之外，还支持所有和RouterLink一样的语法书写方式，就比如
router.push({
name: ‘xiang’,
query: {
id: ‘xxx’,
title: ‘xxx’,
content: ‘xxx’
}
})