当前位置：首页 > news >正文

Vue-router

news 2026/2/11 0:50:18

router的使用（5+2）

5个基础步骤：

1.在终端执行yarn add vue-router@3.6.5，安装router插件

yarn add vue-router@3.6.5

2.在文件的main.js中引入router插件

import VueRouter from 'vue-router'

3.在main.js中安装注册Vue.use(Vue插件)

Vue.use(VueRouter)

4.在main.js中创建路由对象

const router = new VueRouter()

5.注入到new Vue中，建立关联

new Vue({render: h => h(App),router: router
}).$mount('#app')

2个核心步骤：

1.创建需要的组件（views目录)，配置路由规则

import Find from './views/Find.vue'
import Friend from './views/Friend.vue'
import My from './views/My.vue'
Vue.use(VueRouter)//VueRouter插件初始化const router = new VueRouter({// 路由规则routes:[{path:'/find',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}]
})

2.准备导航链接，配置路由出口

<template><div><div><a href="#/find">发现音乐</a><a href="#/my">我的音乐</a><a href="#/friend">我的朋友</a></div><div><router-view></router-view></div></div>
</template>

Vue Router 提供了以下常用的标签和功能：

<router-link>：渲染一个 <a> 标签，点击时会导航到指定的路由。
<router-view>：用于渲染匹配到的路由组件。
router-link 组件的 to 属性：用于指定要跳转的目标路由，可以是字符串或对象。
router-view 组件：用于根据当前路由匹配到的组件进行渲染。

路由的封装抽离

目标：将路由模块抽离出来

好处：拆分模块，利于维护

在src目录下创建router文件，在文件中创建index.js文件，将main.js中的路由模块抽离到index.js文件中

import VueRouter from 'vue-router'
import Find from '../views/Find.vue'
import Friend from '../views/Friend.vue'
import My from '../views/My.vue'import Vue from 'vue'
Vue.use(VueRouter)//VueRouter插件初始化const router = new VueRouter({// 路由规则routes:[{path:'/find',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}]
})export default router

在main.js中引入index.js文件

import router from './router'

声明式导航-导航链接

需求：实现导航高亮效果

vue-router提供了一个全局组件router-link（取代a标签）

能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需#
能高亮，默认就会提供高亮类名，可以直接设置高亮样式

1.router-link-active 模糊匹配（用的多）

to = '/my' 可以匹配/my /my/a /my/b .......

2.router-link-exact-active 精确匹配

to = '/my' 仅可以匹配 /my

<template><div><div class="footer_wrap"><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">我的朋友</router-link></div><div><router-view></router-view></div></div>
</template>

.footer_wrap a.router-link-active{background-color: aqua;
}

自定义匹配类名

const router = new VueRouter({// 路由规则routes:[{path:'/find',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}],linkActiveClass:'active',linkExactActiveClass:'exact-avtive'})

.footer_wrap a.active{background-color: aqua;
}

声明式导航-跳转传参

目标：在跳转路由时，进行传值

1.查询参数传参

语法格式如下

to = '/path?参数名 = 值'

对应页面组件接收传递过来的值

$route.query.参数名

<template><div class="home"><router-link to="/search?key=百度">百度</router-link><router-link to="/search?key=网易">网易</router-link><router-link to="/search?key=腾讯">腾讯</router-link></div>
</template>

<template><div><p>搜索关键字：{{ $route.query.key }}</p><p></p></div>
</template>

2.动态路由传参

1.配置动态路由

const router = new VueRouter({// 路由规则routes:[{path:'/search/:words',component:Search},{path:'/home',component:Home}],linkActiveClass:'active',linkExactActiveClass:'exact-avtive'})

2.配置导航链接

to="/path/参数值"

<template><div class="home"><router-link to="/search/百度">百度</router-link><router-link to="/search/网易">网易</router-link><router-link to="/search/腾讯">腾讯</router-link></div>
</template>

3.对应页面组件接收传递过来的值

$route.params.参数名

<template><div><p>搜索关键字：{{ $route.params.words }}</p><p></p></div>
</template>

Vue路由-重定向

问题：网页打开，url默认是/路径，未匹配到组件时，会出现空白

说明：重定向：匹配path后，强制跳转path路径

语法：

{path: 匹配路径，redirect:重定向到的路径}

const router = new VueRouter({// 路由规则routes:[{path:'/',redirect:'/home'},{path:'/search/:words',component:Search},{path:'/home',component:Home}],linkActiveClass:'active',linkExactActiveClass:'exact-avtive'})

Vue路由-404

作用：当路径找不到时，给个提示页面

位置：配在路由最后

语法：

{path:"*"(任意路径)-前面不匹配就命中最后这个}

const router = new VueRouter({// 路由规则routes:[{path:'/',redirect:'/home'},{path:'/search/:words',component:Search},{path:'/home',component:Home},{path:'*',component:NotFound}],linkActiveClass:'active',linkExactActiveClass:'exact-avtive'})

Vue路由-模式设置

问题：路由的路径看起来不自然，有#，能否切成真正的路径模式

hash路由（默认）例如：http://localhost:8080/#/home
history路由（常用）例如：http：//localhost:8080/home（以后上线需要服务器端支持）

const router = new VueRouter({mode:'history',// 路由规则routes:[{path:'/',redirect:'/home'},{path:'/search/:words',component:Search},{path:'/home',component:Home},{path:'*',component:NotFound}],linkActiveClass:'active',linkExactActiveClass:'exact-avtive'})

历史记录在vue-router中的使用

历史记录在Vue Router中主要通过router对象来管理。具体来说，你可以使用this.$router来访问router对象。

要在Vue Router中使用历史记录，你可以通过以下方式进行操作：

编程式导航： 你可以使用this.$router.push()方法来向历史记录添加一个新的条目，或者使用this.$router.replace()方法来替换当前的历史记录条目。例如：

// 添加新的历史记录条目
this.$router.push('/new-route');// 替换当前的历史记录条目
this.$router.replace('/new-route');

控制历史记录： 你可以使用this.$router.go()方法来在历史记录中前进或后退多少步，也可以使用this.$router.back()和this.$router.forward()方法来执行后退或前进操作。

// 后退一步
this.$router.go(-1);// 前进一步
this.$router.go(1);

监听历史记录变化： 你可以通过监听this.$router对象的事件来处理历史记录的变化。例如，你可以监听beforeEach、beforeResolve和afterEach等事件来执行相应的操作。

this.$router.beforeEach((to, from, next) => {// 在导航触发之前执行的逻辑
});this.$router.afterEach((to, from) => {// 导航完成后执行的逻辑
});

实现嵌套路由

// 父路由组件
const router = new VueRouter({routes: [{ path: '/parent', component: ParentComponent, children: [{ path: 'child', component: ChildComponent }]}]
});

命名视图

命名视图（Named Views）是 Vue Router 提供的一项功能，允许你在同一个页面中同时显示多个命名视图的内容。这在构建复杂的页面布局时非常有用，可以让不同的组件渲染到页面中不同的位置。

在 Vue Router 中使用命名视图，需要在路由配置中指定每个视图的名称，并在组件中使用 <router-view> 标签来显示对应名称的视图内容。

const router = new VueRouter({routes: [{path: '/',components: {default: HomeComponent,header: HeaderComponent,sidebar: SidebarComponent}}]
});

在上面的路由配置中，我们定义了三个命名视图：default、header 和 sidebar，分别对应不同的组件。然后在页面模板中可以这样使用：

<div id="app"><router-view name="header"></router-view><router-view></router-view> <!-- 默认会显示 default 视图 --><router-view name="sidebar"></router-view>
</div>

导航守卫

导航守卫是 Vue Router 中用于控制路由跳转的功能，可以在路由导航过程中进行一些操作，比如权限验证、页面加载前后的处理等。导航守卫主要分为全局前置守卫、全局解析守卫、全局后置钩子和路由独享守卫。

1. 全局前置守卫（Global Before Guards）

beforeEach(to, from, next)：在路由跳转之前调用，常用于进行权限验证或其他全局操作。

2. 全局解析守卫（Global Resolve Guards）

beforeResolve(to, from, next)：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用。

3. 全局后置钩子（Global After Hooks）

afterEach(to, from)：在导航完成之后调用，常用于页面切换后的一些操作。

4. 路由独享守卫（Per-Route Guard）

beforeEnter(to, from, next)：在单个路由配置中定义的守卫，在进入该路由前调用。

const router = new VueRouter({routes: [{path: '/home',component: HomeComponent,beforeEnter: (to, from, next) => {// 进入路由前的操作，如权限验证if (userAuthenticated) {next();} else {next('/login');}}}]
});router.beforeEach((to, from, next) => {// 全局前置守卫，可用于登录状态验证等next();
});router.afterEach((to, from) => {// 全局后置钩子，在导航完成后调用
});

路由元信息

路由元信息是 Vue Router 中一种特殊的字段，允许你在路由对象中添加额外的自定义信息，比如页面标题、权限要求、页面描述等。这些元信息可以在路由导航过程中访问，并根据需要进行处理。

export default {mounted() {console.log(this.$route.meta.title); // 输出 'Home Page'}
};

在路由组件中，你可以通过 this.$route.meta 来访问路由的元信息

const router = new VueRouter({routes: [{path: '/',component: Home,meta: { requiresAuth: true, title: 'Home Page' }}]
});

路由过渡动效

Vue Router 提供了过渡效果的功能，可以让页面在路由切换时产生动画效果，提升用户体验。你可以使用 Vue 的 <transition> 组件或 <transition-group> 组件来实现路由过渡动效。

使用 <transition> 组件：

<template><transition name="fade" mode="out-in"><router-view></router-view></transition>
</template><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

使用 <transition-group> 组件：

<template><transition-group name="slide" mode="out-in"><router-view></router-view></transition-group>
</template><style>
.slide-enter-active, .slide-leave-active {transition: transform 0.5s;
}
.slide-enter, .slide-leave-to {transform: translateX(100%);
}
</style>