vue Router v4.x
1.使用步骤
**安装:**npm install vue-router@4
- 第一步:创建路由组件的组件;
- 第二步:配置路由映射: 组件和路径映射关系的routes数组;
- 第三步:通过createRouter创建路由对象,并且传入routes和history模式;
- 第四步:使用路由: 通过< router-link>和< router-view>;
router文件夹中的index.js:
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入创建的组件
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
// 配置路由的映射
const routes = [
{ path: '/home', component: Home },
{ path: '/about', compnent: About}
]
// 创建路由对象
const router = createRoter({
routes,
history: createWebHashHistory()
})
// 导出,在main.js中引入并使用
export default router
main.js:
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')
// 简写:链式调用,use本身返回的就是app对象
// createApp(App).use(router).mount("#app")
组件中使用:
<template>
<div class="app">
<p>
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
</p>
<router-view></router-view>
</div>
</template>
2.路由的默认路径
路由的默认路径即重定向,第一次打开时默认跳转到该页面。
const routes = [
// 默认路由
// { path: '/', component: Home},
// 重定向
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/about', compnent: About}
]
3.跳转的模式
通过导入
import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
来选择使用history模式还是hash模式。
4.router-link
router-link配置:
- **to属性:**用于跳转到的地方
- replace属性:和to属性相似,该跳转后不可返回
- active-class属性:设置激活a元素后应用的class,默认是router-link-active
<!-- 修改a标签的class,默认为router-link-active -->
<router-link to="/home" active-class="tjx">home</router-link>
- **exact-active-class属性:**链接精准激活时,应用于渲染的 的 class,默认是router-link-exact-active;
router-link也可以自定义渲染:
<!-- 插槽 -->
<!-- 1.默认 -->
<!-- <router-link to="/home">
<button>首页</button>
</router-link> -->
<!-- 2.组件 -->
<!-- <router-link to="/home">
<nav-bar title="首页"></nav-bar>
<span>hhh</span>
</router-link> -->
<!-- 3.作用域插槽 -->
<!-- props中有很多东西,如 1.href 以及要跳转的路由对象 2.route 还有 3.navigate导航函数 和 4.isActive 是否当前处于活跃状态-->
<!-- 注:custom:添加了这个属性router-link中的元素将不再被a标签包裹,同时不能跳转到to的path,需要手动跳转,这时可以使用 navigate 导航函数,跳转到to的path -->
<router-link to="/home" v-slot="props" custom>
<button @click="props.navigate">{{props.href}}</button>
<!-- <p>{{props.route}}</p> -->
</router-link>
5.路由懒加载
const routes = [
// 默认路由
// { path: '/', component: Home},
// 重定向
{ path: '/', redirect: '/home' },
{
path: '/home', name: "home", component: () => {
return import("../pages/Home.vue") // 路由懒加载:完整写法
}
},
// 路由懒加载:简写
{ path: '/user', component: () => import('../pages/User.vue') }
]
6.路由的其他属性
- name属性:路由记录独一无二的名称;
- meta属性:自定义的数据
const routes = [
{ path: '/home', name: "home", component: Home},
{
path: '/about', component: About,
meta: {
name: 'tjx',
age: 18
}
}
]
7.动态路由基本匹配
很多时候我们需要将给定匹配模式的路由映射到同一个组件: 例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但是用户的ID是不同的; 在Vue Router中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数;
定义:{ path: '/user/:id', component: User }
跳转:<router-link to="/user/123">用户:123</router-link>
8.获取动态路由的值
- 在template中,直接通过 $route.params获取值;
<template>
<div>
<h2>{{ $route.params.id }}</h2>
</div>
</template>
- 在created中,通过 this.$route.params获取值;
- 在setup中,我们要使用 vue-router库给我们提供的一个hook useRoute; 该Hook会返回一个Route对象,对象中保存着当前路由相关的值;
<script>
import { useRouter } from "vue-router";
export default {
name: "App",
// setup中通过useRouter获取$router,注意不是useRoute
setup() {
const router = useRouter();
console.log(router.params.id)
},
methods: {
console.log(this.$route.params.id)
}
};
</script>
9.NotFound
对于哪些没有匹配到的路由,我们通常会匹配到固定的某个页面,比如NotFound的错误页面中,这个时候我们可编写一个动态路由用于匹配所有的页面;
定义:{ path: '/:pathMatch(.*)', component: NotFound }
可以通过 $route.params.pathMatch获取到传入的参数:
<h2>Not Found: {{ $route.params.pathMatch }}</h2>
10.嵌套路由
{
path: '/home', name: "home", component: () => {
return import("../pages/Home.vue") // 路由懒加载:完整写法
},
children: [
{ path: 'message', component: () => import('../pages/HomeMessage.vue') },
{ path: 'shops', component: () => import('../pages/HomeShops.vue') },
]
}
11.手动的页面跳转
有时候我们希望通过代码来完成页面的跳转,比如点击的是一个按钮。
<script>
import { useRouter } from "vue-router";
export default {
name: "App",
// setup中通过useRouter获取$router,注意不是useRoute
setup() {
const router = useRouter();
const jumpToAbout = () => {
// 1.传递字符串
// router.push("/about");
// 2.传递对象
router.push({
path: '/about',
query: {
name: 'yn',
age: 18
}
})
// router.replace("/about")
};
return {
jumpToAbout,
};
},
// methods: {
// jumpToAbout() {
// // router对象
// this.$router.push('/about')
// }
// }
};
</script>
12.query方式的参数
通过query的方式传递参数:
jumpJToProfile() {
this.$router.push({
path: '/profile',
query: { name: 'tjx', age: 18}
})
}
在界面中通过 $route.query 来获取参数:
<h2>query: {{ $router.query.name }} </h2>
13.动态添加路由
// 动态添加路由
const categoryRoute = {
path: '/category',
component: () => import("../pages/Category.vue")
}
router.addRoute(categoryRoute)
// 给一级路由对象home添加二级路由对象
router.addRoute('home', {
path: 'moment',
component: () => import('../pages/HomeMount.vue')
})
14.动态删除路由
- 方式一:添加一个name相同的路由;
router.addRouter({ path: '/about', name: 'about', component: About})
// 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的
router.addRouter({ path: '/other', name: 'about', component: Home})
- 方式二:通过removeRoute方法,传入路由的名称;
router.addRouter({ path: '/about', name: 'about', component: About})
router.removeRoute('about')
- 方式三:通过addRoute方法的返回值回调;
const removeRoute = router.addRoute(routeRecord)
removeRoute()
补充:
- router.hasRoute():检查路由是否存在。
- router.getRoutes():获取一个包含所有路由记录的数组。
15.导航守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。Vue提供了很多的其他守卫函数,目的都是在某一个时刻给予我们回调,让我们可以更好的控制程序的流程或者功能: https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html
// 导航守卫 beforEach
// router.beforeEach((to, form) => {
// // to: route对象,即将跳转到的route对象
// // from: route对象,从哪一个路由对象跳转过来的
// // 返回值:1.false 不进行导航 2.undefined或不写返回值:进行默认导航,该去哪去哪 3.字符串:路径,跳转到该路径中去
// console.log();
// return false // 不能跳转
// })