1 路由的简单实现
先安装:
cnpm i vue-router
要实现基本的路由切换功能:
第一步:新建router/index.ts:
// 创建一个路由器并暴露出去
// 第一步:引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个个要呈现的组件
import Home from "@/components/Home.vue";
import Abouts from "@/components/Abouts.vue";
import News from "@/components/News.vue";
// 第二步:创建路由器
const router = createRouter({
history:createWebHistory(),
routes:[
{
path:'/home',
component:Home
},
{
path:'/news',
component:News
},
{
path:'/about',
component:Abouts
}
]
})
// 第三步:暴露出去router
export default router
// 第四步:到main.ts引入
第二步:修改main.ts:
import { createApp } from 'vue'
import App from './App.vue'
// 引入路由器
import router from "@/router";
const app = createApp(App)
// 使用路由器
app.use(router)
app.mount('#app')
第三步:新建views/About.vue、views/Home.vue、views/News.vue:
<template>
<div>
<p>Abouts</p>
</div>
</template>
<script setup lang="ts">
import {onMounted, onUnmounted} from "vue";
onMounted(()=>{
console.log("Abouts组件挂载了")
})
onUnmounted(()=>{
console.log("Abouts组件卸载了")
})
</script>
<template>
<div>
<p>Home</p>
</div>
</template>
<script setup lang="ts">
import {onMounted, onUnmounted} from "vue";
onMounted(()=>{
console.log("Home组件挂载了")
})
onUnmounted(()=>{
console.log("Home组件卸载了")
})
</script>
<template>
<div>
<p>News</p>
</div>
</template>
<script setup lang="ts">
import {onMounted, onUnmounted} from "vue";
onMounted(()=>{
console.log("News组件挂载了")
})
onUnmounted(()=>{
console.log("News组件卸载了")
})
</script>
第四步:修改App.vue,创建导航区,展示区:
<template>
<div class="app">
<h2 class="style1">Vue路由测试</h2>
<!-- 导航区 -->
<div class="style1">
<RouterLink to="/home" active-class="style2">首页</RouterLink>
<RouterLink to="/news" active-class="style2">新闻</RouterLink>
<RouterLink :to="{path:'/about'}" active-class="style2">关于</RouterLink>
</div>
<!-- 展示区 -->
<div class="style1">
<RouterView></RouterView>
</div>
</div>
</template>
<script setup lang="ts">
import {RouterView,RouterLink} from "vue-router";
</script>
<style scoped>
.style1{
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.style2 {
color: red;
}
</style>
注意:通过点击导航,视觉效果上“消失”的组件,默认是被卸载的,需要的时候再去挂载。
2 to的其他写法
前两种写法:
<RouterLink to="/about" active-class="style2">关于/RouterLink>
<RouterLink :to="{path:'/about'}" active-class="style2">关于</RouterLink>
第三种写法,首先要在router/index.ts中,在每个路由对象中加入name属性:
// 创建一个路由器并暴露出去
// 第一步:引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个个要呈现的组件
import Home from "@/views/Home.vue";
import Abouts from "@/views/Abouts.vue";
import News from "@/views/News.vue";
// 第二步:创建路由器
const router = createRouter({
history:createWebHistory(),
routes:[
{
name:'page1',
path:'/home',
component:Home
},
{
name:'page2',
path:'/news',
component:News
},
{
name:'page3',
path:'/about',
component:Abouts
}
]
})
// 第三步:暴露出去router
export default router
// 第四步:到main.ts引入
<RouterLink :to="{name:'page1'}" active-class="style2">首页</RouterLink>
<RouterLink :to="{name:'page2'}" active-class="style2">新闻</RouterLink>
<RouterLink :to="{name:'page3'}" active-class="style2">关于</RouterLink>
3 嵌套路由的简单实现
在Home页面,放置几个子级路由:
第一步:修改router/index.ts,添加children参数:
// 创建一个路由器并暴露出去
// 第一步:引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个个要呈现的组件
import Home from "@/views/Home.vue";
import Abouts from "@/views/Abouts.vue";
import News from "@/views/News.vue";
import HomeDetail from "@/views/Home-Detail.vue";
// 第二步:创建路由器
const router = createRouter({
history:createWebHistory(),
routes:[
{
name:'page1',
path:'/home',
component:Home,
children:[
{
path:'detail',
component:HomeDetail
}
]
},
{
name:'page2',
path:'/news',
component:News
},
{
name:'page3',
path:'/about',
component:Abouts
}
]
})
// 第三步:暴露出去router
export default router
// 第四步:到main.ts引入
第二步:修改Home.vue,添加子级路由的导航和数据,并传参:
<template>
<div>
<p>Home</p>
<!-- 导航区 -->
<ul>
<li v-for="item in heroList" :key="item.id">
<!-- 第一种写法 -->
<!-- <RouterLink :to="`/home/detail?id=${item.id}&name=${item.name}&content=${item.content}`">{
{item.name}}</RouterLink>-->
<!-- 第二种写法 -->
<RouterLink :to="{path:'/home/detail',query:{id:item.id,name:item.name,content:item.content}}">
{
{item.name}}
</RouterLink>
</li>
</ul>
<!-- 展示区 -->
<div>
<RouterView></RouterView>
</div>
</div>
</template>
<script setup lang="ts">
import {reactive} from "vue";
let heroList = reactive([
{id:"lol-hero-01",name:"亚托克斯",content:"你觉得你能杀死我吗?"},
{id:"lol-hero-02",name:"疾风剑豪",content:"死亡如风,常伴吾身"},
{id:"lol-hero-03",name:"无极剑圣",content:"真正的大师永远抱着一颗学徒的心"},
{id:"lol-hero-04",name:"时间刺客",content:"时间不在于拥有多少,而在于如何使用"}
])
</script>
第三步:新建views/Home-Detail.vue:
<template>
<h3>我是子级路由</h3>
<p>英雄:{
{route.query.name}}</p>
<p>台词:{
{route.query.content}}</p>
</template>
<script setup lang="ts">
import {useRoute} from "vue-router";
let route = useRoute()
</script>
4 路由的props配置
只需要修改上面案例的router/index.ts:
// 第二步:创建路由器
const router = createRouter({
history:createWebHistory(),
routes:[
{
name:'page1',
path:'/home',
component:Home,
children:[
{
path:'detail',
component:HomeDetail,
props(route){
return route.query
}
}
]
},
{
name:'page2',
path:'/news',
component:News
},
{
name:'page3',
path:'/about',
component:Abouts
}
]
})
这样在views/Home-Detail.vue中就可以直接接收参数,代码更简洁:
<template>
<h3>我是子级路由</h3>
<p>英雄:{
{name}}</p>
<p>台词:{
{content}}</p>
</template>
<script setup lang="ts">
defineProps(['id','name','content'])
</script>
5 编程式路由导航
通过按钮实现导航:
修改views/Home.vue:
<template>
<div>
<p>Home</p>
<!-- 导航区 -->
<ul>
<li v-for="item in heroList" :key="item.id">
<RouterLink :to="{path:'/home/detail',query:{id:item.id,name:item.name,content:item.content}}">
{
{item.name}}
</RouterLink>
<button @click="showDetail(item)">查看详情</button>
</li>
</ul>
<!-- 展示区 -->
<div>
<RouterView></RouterView>
</div>
</div>
</template>
<script setup lang="ts">
import {reactive} from "vue";
import { useRouter } from "vue-router";
const heroList = reactive([
{id:"lol-hero-01",name:"亚托克斯",content:"你觉得你能杀死我吗?"},
{id:"lol-hero-02",name:"疾风剑豪",content:"死亡如风,常伴吾身"},
{id:"lol-hero-03",name:"无极剑圣",content:"真正的大师永远抱着一颗学徒的心"},
{id:"lol-hero-04",name:"时间刺客",content:"时间不在于拥有多少,而在于如何使用"}
])
const router = useRouter()
interface heroInter{
id:string,
name:string,
content:string,
}
function showDetail(item:heroInter){
router.push({path:'/home/detail',query:{id:item.id,name:item.name,content:item.content}})
}
</script>
6 重定向
将网页的根目录‘/’,指定到某个路径:
修改router/index.ts:
// 创建一个路由器并暴露出去
// 第一步:引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个个要呈现的组件
import Home from "@/views/Home.vue";
import Abouts from "@/views/Abouts.vue";
import News from "@/views/News.vue";
import HomeDetail from "@/views/Home-Detail.vue";
// 第二步:创建路由器
const router = createRouter({
history:createWebHistory(),
routes:[
{
name:'page1',
path:'/home',
component:Home,
children:[
{
path:'detail',
component:HomeDetail,
props(route){
return route.query
}
}
]
},
{
name:'page2',
path:'/news',
component:News
},
{
name:'page3',
path:'/about',
component:Abouts
},
{
path:'/',
redirect:'/home'
}
]
})
// 第三步:暴露出去router
export default router
// 第四步:到main.ts引入