vue引入路由

安装路由

npm install vue-router@4 --save

main.js引入路由

import router from './router'app.use(router)

编写router/index.js

Hash 历史模式（/#/）

Hash 模式直接访问子路径不会报404，因为vue里面有内置配置

 import { createRouter, createWebHashHistory } from 'vue-router'const router = createRouter({routes,  history:createWebHashHistory()})

HTML5 历史模式（/）

而HTML5 模式直接访问子路径会报404，但是也可以解决：在你的服务器上添加一个简单的回退路由

参考

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({routes,  history: createWebHistory(),})

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效

实现1        import LoginView from "../views/LoginView.vue"替换成const LoginView = () => import("../views/LoginView.vue")实现2{path: '/login',name: 'login',component: () => import("../views/LoginView.vue")}

路由名

命名路由{name:"About",path:"/about",component:About}使用命名的路由-导航原:this.$router.push("/about")使用命名的路由this.$router.push({name:"About"})使用命名的路由-传参原:<RouterLink :to="'/details/'+item">{{ item }}</RouterLink>使用命名的路由<router-link :to="{ name:'Details',params:{ name:item } }">{{ item }}</router-link>              

别名【alias】

用于访问路径设置多个名字

{alias:"yl",path:"yule",component:YuleNews}               

路由元信息【meta】

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等

如：利用meta配合导航守卫完成判断用户是否登录在允许打开用户中心页面

  {path: "/home/index",name: 'index',component: () => import("../views/home/Index.vue"),meta: {requiresAuth: true,key: "首页"}},  

动态路由

添加路由

router.addRoute({path:"/news",name:"News",component:News}) 

添加嵌套路由

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数（父级name）、

 router.addRoute("News",{path:"yule",component:Yule}) 

添加多个路由

 const currentRouter = [{path:"/news",name:"News",component:News},{path: '/about',name: 'about',component:About}]for(let i = 0;i<currentRouter.length;i++){router.addRoute(currentRouter[i])}  

删除路由

router.removeRoute("about")  

动态路由实战

 编写dynamicRoute.jsconst mange={path: '/work',//工作监督管理name: 'work',component: () => import("../views/WorkMange/index.vue"),meta: {requiresAuth: true,key: "工作监督管理"}}export default mangeimport mangeRouter from "@/router/dynamicRoute.js"onMounted(() => {api.getPermissions({username: loginStore.username,}).then(res => {console.log(res.data);if (res.data.code == 200) {/*用户权限信息获取 */menuStore.menu = res.data.data/*权控-添加动态路由 */const obj = menuStore.menufor (let i in obj) {if (obj[i].permissionDesc === '/work') {router.addRoute('layout', mangeRouter)//嵌套路由记得写上父级名字'layout'}}}}).catch(error => {console.log(error);})})

使用路由

路由导航

RouterLink / RouterView会默认跳转/

 <template>路由对应显示位置<RouterView></RouterView>跳转<RouterLink to="/">首页</RouterLink><RouterLink to="/about">关于</RouterLink></template><script setup>import {RouterLink,RouterView} from "vue-router"</script>  

编程式导航

选项式API

 <template><h3>Home首页</h3><button @click="clickHandler">跳转到About页面</button></template><script>export default {methods:{clickHandler(){this.$router.push("/about")}}}</script>

组合式API

 <template><h3>About关于页面</h3><button @click="clickHandler">跳转到首页</button></template><script setup>import { useRouter } from 'vue-router'const router = useRouter()function clickHandler(){router.push("/")}</script>

嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构

  SportNews.vue<template><h3>体育新闻</h3></template>YuleNews.vue<template><h3>娱乐新闻</h3></template>News.vue<template><h3>新闻</h3><RouterLink to="/news/sport">体育</RouterLink><RouterLink to="/news/yule">娱乐</RouterLink><RouterView></RouterView></template>index.js{path:"/news",component:News,//路由嵌套(注意：path中不再添加/)children:[{path:"sport",component:SportNews},{path:"yule",component:YuleNews}]}

重定向

用于嵌套时默认跳转

 {path:"/news",component:News,redirect:"/news/sport",children:[{path:"sport",component:SportNews},{path:"yule",component:YuleNews}]}