-
首先说明一点，以上是自己总结的，有不对的地方，欢迎小伙伴们可以指出来
-
1、vue3.0中的路由将vue2.0中的路由有的API进行了删除，有的进行了修改
- tag是我们可以改变标签的属性进行了删除，event也删除了
- exact也进行了删除
- 全局的404不再使用*键了，文档有可查看
- 那么有的小伙伴说都删除了，我们应该使用什么呢？那肯定是有的，想了解的朋友可以去官方看看文档，我看了下，有一个新增的API就是v-slot，具体怎么使用，需要稍等会，正在努力研究中
- 还有我们的组件路由守卫中的beforeRouteEnter进行了删除（我是没找到，希望看到的小伙伴可以告诉我，谢谢）
- 新增的两个API是我们经常会使用到的，很有用useRouter,useRoute后面会介绍到，别慌
-
2、先看下简单的语法，跟vue2.0的一样
<router-link to="/">首页</router-link>
<router-view></router-view>//要在哪里显示路由页面，就在哪里进行标签的书写
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{
path:"/",
name:"home",
component:()=>import("../views/home.vue")
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
//在main.js中进行引入，并进行挂载注册到全局上
-
4、query和params进行传参
- params传参要在路由的js文件中进行配置
const routes = [
{
path:'/home/:id',//这个id就是我们要使用params进行动态传递的参数
name:home,
component:Home
}
]
//! 在我们的页面中直接进行写就可以了
<router-link to="/home/111">点击跳转到home页面并传参</router-link>
//接受的时候
vue2.0中this.$route.params.id
vue3.0中import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id);//111
<router-link to="/test?id=999">test</router-link>
//接受的时候
vue2.0中this.$route.query.id
vue3.0中import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.id);//999
- 编程式导航的传参，params使用name,query使用path
vue3.0中import { useRouter } from 'vue-router'
const route = useRouter()
// ! query编程式导航传参
route.push({
path:"/lianxi",
query:{
id:666
}
});
//! params编程式导航传参
route.push({
name:'lianxi',
params:{
id:666
}
});
接受参数的方法跟上面的一样
vue3.0中import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.id);//999
-
注意：上面的编程式导航用到了上面提到的两个API，一个是我们需要进行设置的，一个是我们用来读取的
就像vue2.0中的this.$router.push()和this.$route.query.id等是不是很像呢
<router-link to="/home" replace></router-link>
route.push({
path:"/home",
replace:true
})
<router-view name="LeftSidebar"></router-view>
<router-view></router-view>
<router-view name="RightSidebar"></router-view>
//在路由的设置js文件中进行配置下
const route = [
{
path:"/home",
name:"home",
components:{
default:Home,//默认显示home页面
LeftSidebar:LeftSidebar,//显示左侧页面
RightSidebar//显示右侧页面
}
}
]
route = [
{
path:"/",
redirect:"/home"//重定向
},
{
path:"/test",
name:"test",
component:Test,
alias:"/aa",//别名使用时直接使用aa就可以了
alias:["/aa","/cc"],//此时用哪个都可以，这是多个别名
}
]
<router-link to="/aa"></router-link>
-
8、可以使用props的形式进行获取路由传递的参数，这样使路由有很好的一个灵活性
//在路由配置的组件中，我们进行配置
const routes = [
{
path:"/aa/:id",
name:"aa",
component:Aa,
props:true//要加这个
}
]
//在页面中
<router-link to= "/aa/666">点击跳转并传参</router-link>
//在aa的页面中
props:['id'],
<template>
{{id}}//直接就能获取到我们传递过来的参数
</template>
-
9、要是有多个命名视图的时候，props也要写多个
const routes = [
{
path:"/use/:id",
name:"use",
components:{
default:Use,
slide:Slide,
rightSlide
},
props:{
default:true,
slide:false,
rightSlide:false
}
}
]
-
10、全局路由守卫（vue-router4.0中将next取消了，可写可不写，return false取消导航，undefined或者是return true验证导航通过）
- router.beforeEach((to,from)=>{}),next是可选参数，可写可不写，return false是取消导航，如果返回值为true或者是undefined意味着通过验证
- router.afterEach((to,from)=>{})
- console.log(to.fullPath);//1可以直接将当前的URL路径及传参打印出来
-
11、路由独享
const routes = [
{
path:"/home",
name:"home",
component:Home,
beforeEnter:(to,from) =>{
//to是当用户点击进入当前页面的时候,我们可以进行一些拦截设置
//from当来自其他页面进入当前页面的时候，我们也可以进行拦截提示用户
alert('我是路由独享守卫！！！')
}
}
]
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
onBeforeRouteUpdate((to,from)=>{//当前组件路由改变后，进行触发
console.log(to);
})
onBeforeRouteLeave((to,from)=>{//离开当前的组件，触发
alert('我离开啦')
})
-
13、新增的一些方法（或者是之前就有的，而我没有注意到）
-
addRoute：新添加路由页面(也可以添加子页面路由)
- 添加一级路由
// todo 这是新添加的路由页面，如果有重复的属性，会先删除前面的，添加后面的路由页面
router.addRoute({
path:"/router",
name:"router",
component:()=>import('../views/router.vue')
})
// 1 添加子路由，第一个参数是父路由的name名，后面是子路由的数据
router.addRoute({ name: 'admin', path: '/admin', component: Admin })//1 父路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })//1 子路由
- 如果添加的路由有点问题，可以将下面的这句代码加上看看
// * 如果上面添加的路由页面没有变化，那么就添加这行代码
router.replace(router.currentRoute.value.fullPath)//替换当前路由页面的路由
router.removeRoute('router');
-
14、官方文档中介绍了<router-link><router-view>中使用v-slot的写法，目前研究中，有会的大佬，请教教我，万分感谢！！！
