vue路由详解

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.js
            const mange=
            {
                path: '/work',//工作监督管理
                name: 'work',
                component: () => import("../views/WorkMange/index.vue"),
                meta: {
                  requiresAuth: true,
                  key: "工作监督管理"
                }
            
            }
            export default mange
            

            import 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.menu
                        for (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
                     }
                   ]
          }