首页 > 其他分享 >《Vue 路由导航：打造流畅的单页应用一》

《Vue 路由导航：打造流畅的单页应用一》

时间：2024-12-02 13:29:50浏览次数：7  
标签：Vue name 单页 component 组件 path 路由

一、Vue Router 简介

Vue Router 是什么？

Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页面应用并实现页面间导航。它基于 Vue 的组件系统构建，通过配置路由将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 的作用和优势

  1. 路由管理：定义 URL 路径与组件映射，实现页面切换。


const routes = [


{ path: '/', component: HomeView },


{ path: '/about', component: AboutView }


];


const router = createRouter({


history: createMemoryHistory(),


routes


});


  • 

    • Vue Router 的 routes 选项定义了一组路由，把 URL 路径映射到组件。例如：


  • 

    • 这些路由组件通常被称为视图，本质上它们只是普通的 Vue 组件，在应用的模板中可以使用 <router-view> 来声明路由的占位符，Vue Router 会根据当前的 URL 路径在 <router-view> 中渲染对应的组件。


  1. 嵌套路由：构建复杂页面结构。




const router = new VueRouter({


routes: [


{


path: '/bar',


component: Bar,


children: [


{


// 组件 routerChild 会被渲染在 bar 组件的 router-view 中


path: '/bar/child', //或者直接写成 child 相当于 '/bar/child'


component: routerChild


}


]


}


]


});


  • 

    • 嵌套路由在实际开发中应用较多，一般是一个路由页里边包含一个或多个路由页。实际场景一般是上边固定不变，下边导航切换。


  • 

    • 配置示例：


  1. 路由参数：动态传递数据给组件。




const routes = [


{ path: '/user/:id', component: User }


];


// 在组件中使用


this.$router.push({ path: '/user/123' });


console.log(this.$route.params.id); // 输出：123




const routes = [


{ path: '/search', component: Search }


];


// 在组件中使用


this.$router.push({ path: '/search', query: { q: 'Vue Router' } });


console.log(this.$route.query.q); // 输出：'Vue Router'


  • 

    • 动态参数使用 : 符号定义，可以在组件中通过 $route.params 访问。例如：


  • 

    • 查询参数通过 ? 符号定义，可以在组件中通过 $route.query 访问。例如：


  1. 导航守卫：进行身份验证等操作。




router.beforeEach((to, from, next) => {


// 预检查逻辑


next(); // 继续导航


});


  • 

    • 路由守卫提供了在导航发生之前执行预检查的能力。主要包括全局守卫、路由守卫和导航守卫。例如：


  1. 代码分割：提高应用性能。




const Home = () => import(/* webpackChunkName: "home" */ '../views/Home.vue');


const About = () => import(/* webpackChunkName: "about" */ '../views/About.vue');


const Contact = () => import(/* webpackChunkName: "contact" */ '../views/Contact.vue');


export default new Router({


mode: 'history',


routes: [


{ path: '/', name: 'Home', component: Home },


{ path: '/about', name: 'About', component: About },


{ path: '/contact', name: 'Contact', component: Contact }


]


});


  • 

    • 在单页面应用中，路由的配置直接影响到页面的加载和渲染。传统的单文件打包方式会导致所有路由相关的代码都打包在一起，增加了初始加载的体积。而代码分割技术可以使得每个路由相关的代码独立打包，实现按需加载，从而优化了应用的性能。


  • 

    • 实现路由级别的代码分割，可以通过以下步骤：


  • 

    • 

      • 使用 <router-view> 组件：在应用的模板中使用 <router-view> 来声明路由的占位符。


  • 

    • 

      • 定义路由和组件：为每个路由定义对应的组件。


  • 

    • 

      • 利用动态导入：使用动态导入（import()）来按需加载路由组件。


  • 

    • 示例：


二、安装和配置


安装 Vue Router


可以使用 npm 或 yarn 安装 Vue Router。例如，在命令行中输入npm install vue-router或yarn add vue-router即可完成安装。


在 Vue 项目中配置 Vue Router


  1. 导入并安装插件。




import Vue from 'vue';


import VueRouter from 'vue-router';


Vue.use(VueRouter);


  • 

    • 在 Vue 项目中，首先需要导入 Vue Router 并将其安装为插件。在项目的入口文件（通常是main.js）中，可以使用以下代码导入并安装插件：


  1. 创建路由规则。




const routes = [


{ path: '/', component: HomeView },


{ path: '/about', component: AboutView }


];




const router = new VueRouter({


routes: [


{


path: '/bar',


component: Bar,


children: [


{


// 组件 routerChild 会被渲染在 bar 组件的 router-view 中


path: '/bar/child', //或者直接写成 child 相当于 '/bar/child'


component: routerChild


}


]


}


]


});


  • 

    • 创建路由规则需要定义一组路由，把 URL 路径映射到组件。例如：


  • 

    • 也可以配置嵌套路由，比如：


  1. 在根 Vue 实例中配置 router。




import Vue from 'vue';


import App from './App.vue';


import router from './router';


const app = new Vue({


router,


render: h => h(App),


}).$mount('#app');


  • 

    • 在main.js文件中，创建 Vue 实例时，将路由实例挂载到 Vue 实例上：


三、基本路由


创建基本路由


在 Vue Router 中，创建基本路由主要是定义 URL 路径与组件的映射。通过配置路由规则，可以将不同的 URL 路径与特定的 Vue 组件关联起来，实现页面的切换和导航。例如：




const routes = [


{ path: '/home', component: HomeComponent },


{ path: '/about', component: AboutComponent }


];


const router = new VueRouter({


routes


});


在上面的代码中，我们定义了两个路由规则，分别将/home路径和/about路径映射到HomeComponent和AboutComponent组件。


路由链接和路由视图


使用<router-link>创建导航链接，<router-link>组件会生成一个<a>标签，并自动绑定路由信息，方便用户在页面上进行导航。例如：




<router-link to="/home">Home</router-link>


<router-link to="/about">About</router-link>


使用<router-view>显示对应组件。<router-view>是一个占位符，Vue Router 会根据当前的 URL 路径在<router-view>中渲染对应的组件。例如：




<div>


<router-view></router-view>


</div>


动态路由参数


在路由路径中定义参数，可以实现动态传递数据。动态参数使用:符号定义，在组件中可以通过$route.params访问。例如：




const routes = [


{ path: '/user/:id', component: UserComponent }


];


// 在组件中使用


this.$router.push({ path: '/user/123' });


console.log(this.$route.params.id); // 输出：123


这样，当用户访问/user/123时，123将作为参数传递给UserComponent组件，可以在组件中通过$route.params.id获取这个参数值，实现动态的数据传递和页面渲染。


四、嵌套路由


创建嵌套路由


在 Vue Router 中，创建嵌套路由主要是在组件内部定义子路由。具体步骤如下：


  1. 首先，在路由配置文件中定义父路由和子路由。例如：




const router = new VueRouter({


routes: [


{


path: '/parent',


component: ParentComponent,


children: [


{


path: 'child',


component: ChildComponent


}


]


}


]


});


  1. 在父组件（ParentComponent）中，需要使用<router-view>来渲染子路由的内容。例如：




<template>


<div>


<!-- 父组件内容 -->


<router-view></router-view>


<!-- 子组件将在这里渲染 -->


</div>


</template>


嵌套路由的使用场景和好处


  1. 构建复杂页面结构：在实际开发中，应用的有些界面是由多层级组件组合而来的。例如，一个电商平台可能有商品浏览、用户中心、购物车等不同功能区域，这些功能区域可以通过嵌套路由来组织。又如，在一个内容管理系统中，文章编辑、分类管理、用户权限等多级菜单结构也可以使用嵌套路由来实现。


  1. 提高代码复用性：父级路由可以定义一个通用的布局或模板，子路由则提供具体的页面内容。这样可以避免重复编写代码，提高开发效率。例如，在一个企业级应用中，可能有多个页面都需要使用相同的头部和底部导航栏，这时可以将头部和底部导航栏放在父组件中，然后在子路由中只编写具体的页面内容。此外，通过动态路由匹配，可以实现对特定资源的访问，如/user/:id。在这种情况下，不同的用户 ID 都可以使用相同的父组件和子组件结构，只需要根据不同的 ID 加载不同的数据即可。


五、路由导航守卫


全局前置守卫


全局前置守卫是在路由导航发生前执行的一种守卫机制，可以在路由切换前执行自定义逻辑。通过调用 router.beforeEach 方法注册全局前置守卫。


全局前置守卫接收三个参数：to（即将进入的目标路由对象）、from（当前导航正要离开的路由对象）、next（一个必须调用的函数，用来处理导航操作）。


例如：




const router = new VueRouter({... });


router.beforeEach((to, from, next) => {


// 在这里实现验证用户是否有权限访问该路由的逻辑


const isAuthenticated = // 鉴权逻辑，比如检查用户是否已登录、是否有相应权限等


if (isAuthenticated) {


next(); // 如果验证通过，继续导航


} else {


next('/login'); // 如果验证失败，跳转到登录页面


}


});


在上述示例中，我们使用 router.beforeEach 方法注册了一个全局前置守卫。在守卫函数中，我们可以编写验证用户是否有权限访问该路由的逻辑，如果验证通过，则调用 next() 方法继续导航，否则调用 next('/login') 方法跳转到登录页面或其他页面。


路由独享的守卫


路由独享的守卫是特定路由的守卫，只作用于某个特定的路由，而不像全局守卫那样作用于所有的路由。


可以在路由配置中通过beforeEnter属性来定义路由独享守卫。例如：




const routes = [


{


path: '/admin',


component: Admin,


beforeEnter: (to, from, next) => {


console.log('Entering Admin route');


if (isAuthenticated()) {


next();


} else {


next('/login');


}


}


}


];


在这个示例中，beforeEnter守卫只在用户导航到/admin路由时触发。守卫逻辑检查用户是否已认证，如果是，则允许继续导航，否则重定向到登录页面。


组件内的守卫


组件内的守卫是在组件进入、更新或离开时执行逻辑的守卫机制。Vue.js 提供了以下三个组件内守卫钩子：


  1. beforeRouteEnter：在路由进入之前调用。不能直接访问组件实例，因为在守卫执行时组件实例还没有被创建。可以在next回调中访问组件实例。例如：




export default {


name: 'UserProfile',


beforeRouteEnter(to, from, next) {


console.log('Entering UserProfile route');


next(vm => {


// 组件实例已经创建，可以访问


vm.fetchUserData();


});


},


methods: {


fetchUserData() {


// 逻辑代码


}


}


};


  1. beforeRouteUpdate：在当前路由改变，但仍然渲染同一组件时调用。例如：




export default {


name: 'UserProfile',


beforeRouteUpdate(to, from, next) {


console.log('Route updated');


this.fetchUserData(to.params.id);


next();


},


methods: {


fetchUserData(id) {


// 逻辑代码


}


}


};


  1. beforeRouteLeave：导航离开当前组件的路由时调用，常用于确认用户是否保存了更改或阻止导航。例如：




export default {


name: 'UserProfile',


beforeRouteLeave(to, from, next) {


const answer = window.confirm('Do you really want to leave? You have unsaved changes!');


if (answer) {


next();


} else {


next(false);


}


}


};


六、路由传参


查询参数


查询参数是在 URL 中通过 ? 符号传递的数据。在 Vue Router 中，可以使用 this.$route.query 来接收查询参数。例如：




const routes = [


{ path: '/search', component: Search }


];


// 在组件中使用


this.$router.push({ path: '/search', query: { q: 'Vue Router' } });


console.log(this.$route.query.q); // 输出：'Vue Router'


在声明式导航传参中，可以使用 to=\"/path?参数名=值\" 的语法格式在 <router-link> 上传递查询参数，在接收参数的组件内，通过 $route.query.参数名 来接收传递过来的值。例如：




<router-link to="/find?name=杨帆&age=21">发现音乐</router-link>


在接收参数的 find 组件代码中：




<template>


<div>


find 组件 这是声明式导航通过查询字符串方式传递过来的参数 


<br>


{{$route.query.name}}{{ $route.query.age }}


<br>


</div>


</template>


<script>


export default {};


</script>


<style scoped>


</style>


在编程式导航传参中，可以使用 path + query 的组合方式传递查询参数。例如：




<a @click.prevent="goFriend('/part', 'part')">朋友</a>


goFriend(path, name){


this.$router.push({path: path,query:{name:'杨帆',age:'21'}})


}


在 part 组件中通过 $route.query.name 接收参数：




<template>


<div>


part 组件 这是编程式导航通过 path + query 方式传递过来的参数 


<br>


{{ $route.query.name }}{{ $route.query.age }}


<br>


</div>


</template>


<script>


export default {};


</script>


<style>


</style>


路由参数


路由参数是在路由路径中定义的动态参数，使用 : 符号定义。在 Vue Router 中，可以在组件中通过 $route.params 访问路由参数。例如：




const routes = [


{ path: '/user/:id', component: User }


];


// 在组件中使用


this.$router.push({ path: '/user/123' });


console.log(this.$route.params.id); // 输出：123


在声明式导航传参中，可以使用动态路由参数的方式传递参数，语法格式为 to=\"/path/值\"，但需要提前配置路由对象。例如：




<router-link to="/my/杨帆/21">我的音乐</router-link>


配置路由对象：




const routes = [


{


// 匹配的路径


path:'/',


// 重定向到 find 组件


redirect:'/find'


},


{


path:'/find',


name:'find',


component: find


},


{


path:'/my/:name/:age',


name:'my',


component: my


}


];


在接收参数的 my 组件中，使用 $route.params.参数名 接收参数：




<template>


<div>


my 组件 这是声明式导航通过动态路径参数方式传递过来的参数 


<br>


{{ $route.params.name }}{{ $route.params.age }}


<br>


</div>


</template>


<script>


export default {};


</script>


<style>


</style>


在编程式导航传参中，可以使用 name + params 的组合方式传递路由参数。例如：




<a @click.prevent="goShop('/shop', 'shop')">商城</a>


goShop(path, name){


this.$router.push({name: name,params:{name:'杨帆',age:'21'}})


}


在 shop 组件中通过 $route.params.name 接收参数：




<template>


<div>


shop 组件 这是编程式导航通过 path + query 方式传递过来的参数 


<br>


{{ $route.params.name }}{{ $route.params.age }}


<br>


</div>


</template>


<script>


export default {};


</script>


<style>


</style>


命名路由


命名路由是给路由规则起个名字，可以简化路由的跳转，特别是在路由层级比较多时。在 Vue Router 中，可以通过 name 属性给路由规则命名。例如：




{


path:'/demo',


component:Demo,


children:[


{


path:'test',


component:Test,


children:[


{


name:'hello',


path:'welcome',


component:Hello


}


]


}


]


}


简化跳转：




<!--简化前，需要写完整的路径 -->


<router-link to="/demo/test/welcome">跳转</router-link>


<!--简化后，直接通过名字跳转 -->


<router-link :to="{name:'hello'}">跳转</router-link>


<!--简化写法配合传递参数 -->


<router-link:to="{name:'hello',query:{id:666,title:'你好'}}">跳转</router-link>


在使用命名路由时，router 标签中的 to 只能写成对象形式才能使用。例如：




const routes = [


{


name:'guanyu',


path:'/about',


component:About,


children:[


{


// 二级路由路径不能加/


path:'message',


component:Message,


children:[


{


name:'xiangqing',


path:'detail',


component:Detail


}


]


}


]


},


{


path:'/home',


component:Home,


children:[


{


// 二级路由路径不能加/


path:'news',


component:News


}


]


}


];


使用配置：




<router-link:to="{


//path:'/about/message/detail',


name:'xiangqing',


query:{id:m.id,title:m.title}


}">{{m.title}}</router-link>


<router-link active-class="active":to="{name:'guanyu'}">About</router-link>


七、路由懒加载


懒加载的概念和原理


在 Vue.js 中，懒加载允许根据需要动态加载组件或资源，从而减少初始页面加载时间并提高性能。具体实现方法包括使用<keep-alive>和<component is>组件，以及动态导入等方式。懒加载的核心是将页面的组件或资源按需加载，只有在用户需要访问特定页面或组件时才进行加载，而不是在应用启动时一次性加载所有内容。


使用懒加载提高应用性能


路由懒加载可以显著减少初始加载时间。在传统的单页应用中，所有的组件通常会在应用启动时一起打包加载，这可能导致初始加载时间过长，影响用户体验。而通过路由懒加载，每个路由对应的组件会被分割成独立的代码块，只有在用户访问该路由时才会加载对应的组件，从而大大减少了初始加载的时间。例如，在一个包含多个页面的 Vue 应用中，如果没有使用懒加载，那么所有页面的组件代码都会在应用启动时加载，可能会导致加载时间过长。而使用懒加载后，只有当用户访问特定页面时，该页面的组件才会被加载，这样可以极大地提高应用的性能和用户体验。此外，懒加载还可以减小初始包体积，避免在页面加载时加载不需要的组件，从而节省带宽，进一步提高用户体验。




标签：Vue,name,单页,component,组件,path,路由	

From： https://blog.csdn.net/qq_42190530/article/details/144130846
      

      




      

      

        
相关文章

        

          
    
 
  • 2024年值得推荐的6款 Vue 后台管理系统模板，开源且免费！
    https://www.cnblogs.com/Can-daydayup/p/18579652 思维导航前言适合后端程序员的前端框架vue-element-adminNaiveUiAdminAntDesignVueProArcoDesignProVuevue-pure-adminTDesignVueNextStarter前言在现今的软件开发领域，Vue.js凭借其高效、灵活......
     
  • 基于SpringBoot+Vue的在线宠物用品交易网站-无偿分享 (附源码+LW+调试)
    目录1.项目技术2.功能菜单3.部分功能截图4.研究背景5.研究目的6.可行性分析6.1技术可行性6.2经济可行性6.3操作可行性7.系统设计7.1概述7.2系统流程和逻辑7.3系统结构8.数据库设计8.1数据库ER图（1）管理员实体属性图（2）客服信息实体属性图（3）商品资......
     
  • 基于SpringBoot+Vue的论坛网站-无偿分享 (附源码+LW+调试)
    目录1.项目技术2.功能菜单3.部分功能截图4.研究背景5.研究目的6.可行性分析6.1技术可行性6.2经济可行性6.3操作可行性7.系统设计7.1概述7.2系统流程和逻辑7.3系统结构8.数据库设计8.1数据库ER图（1）问题反馈实体属性图（2）系统资讯实体属性图（3）论坛......
     
  • 在ensp中华为设备怎么配置静态路由
    1.环境搭建要求：AR1-AR2-AR4为主路由  AR1-AR2-AR4为备路由 主路由优先级为60，备份路由优先级为70 数值越大优先级越低在静态路由里面2.设备配置1.IP地址配置2.配置环回口地址3.静态路由配置在R1上配置去往R2环回口地址和R4的路由在R2上配置去网R1R4......
     
  • vue3 + pnpm 打造一个 monorepo 项目
    Monorepo和Multirepo单一仓库（Monorepo）架构，可以理解为：利用单一仓库来管理多个packages的一种策略或手段；与其相对的是多仓库（Multirepo）架构Monorepo目录中除了会有公共的package.json依赖以外，在每个sub-package子包下面，也会有其特有的package.json依赖。兄弟模块之间可以通过模......
     
  • 【开题报告】基于Springboot+vue学生就业信息管理系统（程序+源码+论文) 计算机毕业设计
    本系统（程序+源码）带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育的普及和就业市场的日益竞争，学生就业信息管理成为高校和教育机构面临的重要挑战。传统的就业信息管理方式，如纸质简历、人工匹配等，不仅效......
     
  • 【开题报告】基于Springboot+vue学业导师双选系统（程序+源码+论文) 计算机毕业设计
    本系统（程序+源码）带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在当今高等教育体系中，学业导师制度已成为培养学生综合素质、促进学术发展的重要途径。然而，传统的导师分配方式往往依赖于行政命令或随机分配，这可能导......
     
  • 【开题报告】基于Springboot+vue学院党建工作管理系统设计与实现（程序+源码+论文) 计算
    本系统（程序+源码）带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在高等教育日益重视党建工作的大背景下，学院党建工作作为高校党建的重要组成部分，其管理效率与质量直接关系到党的教育方针在高校的贯彻落实以及学生党......
     
  • 【开题报告】基于Springboot+vue校园志愿服务管理系统（程序+源码+论文) 计算机毕业设计
    本系统（程序+源码）带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在当今社会，志愿服务已成为校园文化中不可或缺的一部分，它不仅能够培养学生的社会责任感和实践能力，还能促进校园内外的和谐与进步。然而，随着志愿服务活......
     
  • 【开题报告】基于Springboot+vue校园二手智能交易平台APP（程序+源码+论文) 计算机毕业
    本系统（程序+源码）带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在当今社会，随着科技的飞速发展和环保意识的日益增强，资源的循环利用已成为社会发展的重要趋势。校园作为知识传播与创新的摇篮，其内部资源的高效利用尤......
     
    •            
          

        

      

    

    

      
赞助商

      




      

      
阅读排行

      

        
      

    

  





  
 
    
网站主页关于我们联系我们网站地图 

    
本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。 

    
Copyright © 2020-2023  IPS99  版权所有 IPS99