Vue-Router安装与基本使用

052101407吴伟杰 2024-06-06 16:11:12

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	课程回顾与总结、个人技术总结
其他参考文献	构建之法&CSDN

Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 核心深度集成，可以轻松构建单页面应用程序（SPA）。Vue Router 允许你通过简单的配置将 Vue 组件映射到应用程序的 URL，并且可以根据不同的 URL 加载不同的组件，实现页面之间的切换和导航。
vue-router 的官方文档地址：https://router.vuejs.org/zh/

技术详述

安装 vue-router：

npm i vue-router -S

将 vue-router 挂载到 Vue 实例上：
在 main.js 中

import VueRouter from 'vue-router'
Vue.use(VueRouter);

在项目的 src 目录下，新建 routes 文件夹，来统一管理路由配置表。这里新建了一个 index.js 作为我的路由配置表，比如：

// 引入组件
import RouterDemo from "../components/RouterDemo";
 
// 配置路径与组件的映射
const routes = [
    {
        path: "/",
        redirect: "/bar",
    },
    {
        path: "/bar",
        component: RouterDemo,
        name: "2",
    },
    {
        path: "/user",
        component: RouterDemo,
        name: "3",
        children: [
          {
            path: "profile",
            component: RouterChildrenDemo,
          },
        ],
    }
];
 
export default routes;

在 main.js 中，使用路由配置表创建 vue-router 的实例：

import routes from './router'
 
const router = new VueRouter({
  // mode: history,
  routes,
})

将 vue-router 实例挂载到 Vue 实例上：

new Vue({
  router,// 将 vue-router 实例挂载到 Vue 实例上
  render: h => h(App),
}).$mount('#app')

在 RouterDemo.vue 中控制路由的切换，并通过标签提供一个路由占位：

// RouterDemo.vue
<template>
    <div>
 
        <router-link to="/user/profile">Go to /user/profile</router-link>
 
        <router-view></router-view> 
 
    </div>
</template>
<script>
export default {
    
};
</script>

在路由配置表中提供一个“单纯的路由占位”
如果不用 render 函数，你需要写一个单文件组件，而单文件组件的本质就是render函数——单文件组件通过 vue 的 loader 都会转成 render 函数。
在路由配置表中，设置 component 参数时，使用 rander 函数直接渲染一个 router-view 组件

const routes = [
  {
    path: "/",
    redirect: "/user"
  },
  {
    path: "/user",
 
    /* 使用 rander 函数直接渲染一个 router-view 组件 */
    component: {render:h => h('router-view')},
    /* 等价于下面这种写法：
    component: {render(h) {
      return h('router-view')
    }}, */
 
    children:[
      {
        path: "/user",
        redirect: "/user/login"
      },
      {
        path: "login",
        name: "Login",
        component: () =>
          import(/* webpackChunkName: "user" */ "../views/user/Login")
      },
      {
        path: "register",
        name: "Register",
        component: () => 
          import(/* webpackChunkName: "user" */ "../views/user/Register.vue")
      }
    ]
  },
]

技术使用中遇到的问题和解决过程

问题：在动态路由中获取参数时出现问题，导致无法正确使用参数
解决过程：使用 $route.params 来获取动态路由参数，确保参数名与路由配置中的一致。

// UserDetail.vue

export default {
  created() {
    const userId = this.$route.params.userId;
    // 使用 userId 来加载用户详情数据等操作
  }
}

问题：动态路由界面刷新时候就会抛出异常

解决过程：这个问题解决思路就是，再首次进来时候判断当前的是否要去404页面并且to.redirectedFrom(包含在重定向到当前地址之前，我们最初想访问的地址,并且redirectedFrom不能为空时，重定向到之前个那地址去，为undefined时，当前访问正常（此时访问的应该是静态路由）)

总结

Vue Router允许开发者通过路由映射将不同的 URL 地址与对应的 Vue 组件关联起来，实现页面间的导航和跳转。Vue Router 提供了丰富的功能和灵活的配置选项，包括声明式路由配置、嵌套路由、动态路由、导航守卫和懒加载等。通过声明式路由配置，开发者可以清晰地定义路由规则，而嵌套路由则允许将不同层级的路由映射到对应的组件，实现页面的嵌套和组织。动态路由允许定义带有参数的路由，使得路由路径可以根据参数的变化而动态匹配对应的组件，从而实现更灵活的路由控制。

参考博客

...全文