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

一、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 应用中，如果没有使用懒加载，那么所有页面的组件代码都会在应用启动时加载，可能会导致加载时间过长。而使用懒加载后，只有当用户访问特定页面时，该页面的组件才会被加载，这样可以极大地提高应用的性能和用户体验。此外，懒加载还可以减小初始包体积，避免在页面加载时加载不需要的组件，从而节省带宽，进一步提高用户体验。