【Vue】vue-router的使用

vue-router最新版本为例4.x.x
文档

安装

npm install vue-router@4

router的配置

目录：src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
const routerHistory = createWebHistory();

import New from "../views/new/index.vue";
import Home from "../views/home/index.vue";
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// createWebHistory //history模式
// createWebHashHistory // hash模式
//重定向rediret:'/home'
const routes = [
 {
   path: "/",
   redirect: "/home",
 },
 {
   path: "/home",
   name: "home",
   component: Home,
 }, 
 {
   path: "/new",
   name: "new",
   component: New,
 },
];
const router = createRouter({
 history: routerHistory,
 routes,
});
//导出路由
export default router;

router引用

目录：src/main.js

import { createApp } from "vue";
import App from "./App.vue";
// 引入路由
import router from "./router";
const app = createApp(App);
app
  .use(router)
  .mount("#app");

router-view显示

<template>
  <div id="app">
  	<router-link to="/new">新页面</router-link>
  	<router-link to="/">回到首页</router-link>
    <router-view></router-view>
  </div>
</template>
<script lang="js">
export default {
  setup() {
  },
};
</script>

router-link

• to：调用的router.push()，跳转后可以返回
• replace：调用的router.replace()，跳转后无法返回

路由懒加载

可以增加首页的加载速度，引入的组件会单独打包 (分包)

router中的配置

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "home",
    component: component:()=>{
    	return import(/*webpackChunkName:"home-chunk"*/'../views/new/Home.vue')
    	//使用魔法注释，webpack会解析，dist打包文件中就会出现名称为home-chunk的分包
    },
  }, 
  {
    path: "/new",
    name: "new",
    component: component:()=>{
    	return import('../views/new/New.vue')
    },
  },
];

异步组件

定义

const tempComponent = defineAsyncComponent(()=>import('./tempComponent.vue'))

使用
vue3需要用到Suspense标签

<Suspense>
      <template #default>
        <tempComponent></tempComponent>
      </template>
      <template #fallback>
        <div>正在加载中，请稍等。。。。</div>
      </template>
</Suspense>

路由的其他属性

• name：路由独一无二的名称
• meta：自定义的数据
  

动态路由单独匹配

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "home",
    component: Home,
  },
  {
    path: "/user/:userName",
    name: "user",
    component: User,
  },
];

传入值需要有/wzy，组件才会显示

取值和使用

<template>
    <div>
        user:{{ userName }}
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const router = useRoute()
const userName = router.params.userName
</script>

NotFound

路由不存在的情况
设计notFound组件，在routers中添加匹配路由

{
    path: "/:pathMatch(.*)",//固定写法
    component: () => import("../views/notFound.vue"),
},

嵌套路由

在路由对象下面定义children

显示页

跳转页

编程式路由

<template>
    <div>
        商品
        <button @click="toHome">跳转</button>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter()
const toHome = () => {
    router.push({
        path: '/home',//路由
        query: {
            name: 'wzy',
            cost: 1
        }//路由参数
    })
    //router.replace()替换路由
    //router.go()前进一步
    //router.back()后退一步
}
</script>

<style lang="scss" scoped>

</style>

router-link的v-slot

默认插槽，也可以使用组件

 <router-link to="/new">
      <button>new</button>
 </router-link>

router-view的动画效果

<template>
//...
	<router-view v-slot="props">
      <transition name="temp">
        <keep-alive>
          <component :is="props.Component"></component>
        </keep-alive>
      </transition>
    </router-view>
//... 
</template>
<style>
.temp-enter-from .temp-leave-to {
  opacity: 0;
}

.temp-enter-active .temp-leave-active {
  transition: opacity 1s ease-in-out;
}
</style>

动态操作路由

动态添加路由

router/index.js

//...省略代码
const router = createRouter({
  history: routerHistory,
  routes,
});
//动态添加路由
//顶级路由
const categoryRoute = {
  path:'/dynamic',
  component:()=>import('../views/dynamic.vue')
}
router.addRoute(categoryRoute)
//二级路由
router.addRoute("home", {
  path: "shop",
  component: () => import("../views/home/shop.vue"),
});
//导出路由
export default router;

动态删除路由

• 添加一个name相同的路由，原来的则会被覆盖
• 通过removeRoute方法，传入路由的名称（name）
• 通过addRoute方法的的返回值回调

const removeRoute = router.addRoute(routeRecord)
removeRoute()

其他补充方法

• router.hasRoute():检查路由是否存在
• router.getRoutes()：获取一个包含所有路由记录的数组

路由导航守卫

beforeEach
在导航触发前的回调

//to:Route对象，即将跳转到的Route对象
//from:Route对象，从哪个路由来
//next在vue3中不推荐使用了
/**返回值
1.false,不跳转
2.undefind或者不写返回值，进行默认跳转
3.字符串或者路径，跳转到对应路径
4.对象，类似于router.push()
*/

router.beforeEach((to,from)=>{
	if(to.path.indexof('/home')!==-1){
		return '/login'
	}
})

更多查看文档