Vue-router

最新推荐文章于 2024-06-06 06:48:58 发布
最新推荐文章于 2024-06-06 06:48:58 发布
阅读量992 收藏 16
点赞数 26
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79742908/article/details/136604011
版权

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 提供了以下常用的标签和功能：

  1. <router-link>：渲染一个 <a> 标签，点击时会导航到指定的路由。
  2. <router-view>：用于渲染匹配到的路由组件。
  3. router-link 组件的 to 属性：用于指定要跳转的目标路由，可以是字符串或对象。
  4. 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标签）

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

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>

沼泽里的森林
关注
  • 26
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-router.js
12-30
vue路由vue-router.js文件下载
⑥ 在vue中引入路由
qq_42809973的博客
09-13 253
如何实现路由之间的跳转
在Vue2中引入VueRouter
weixin_68854196的博客
08-08 2713
为了实现SPA应用（单页面应用），所以需要引入VueRouter
前端学习vue：12.Vue引入路由配置及路由传参
最新发布
m0_59008364的博客
06-06 172
Vue Router是Vue.js的官方路由。它与Vue.js核心深度集成，让用Vue.js 构建单页应用变得轻而易举。第一步：安装路由 npm install --save vue-router.以前用一个a标签就可以跳转，在vue里推荐使用路由的方式管理。通过 vue-router路由管理页面之间的关系。一个项目就一个页面也可以跳转，用路由。// 配置信息中需要页面的相关配置。// 让外部可以访问 把它设置导出。第二步：配置独立的路由文件。路由就是管理页面的关系。
Vue2路由的使用 vue-router
m0_62508027的博客
05-12 4141
对vue2中vue-router的使用，简单总结
【VUE】5、VUE项目中引入vue-router
热门推荐
Asurplus
04-02 7万+
vue-router 也叫 vue 路由，根据不同的路径，来执行不同的组件
Vue-router的引入和安装
Lzysnd的博客
03-02 3196
Vue-router的引入和安装
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
Vue项目引入路由
Bald Monkey的博客
08-11 3684
在vue项目中，要实现页面组件之间的跳转，可以通过路由来实现，下面是怎么在项目中引入路由的步骤本篇主要记录Vue项目引入路由，具体的使用方法请参考其他教程。
Vue2 路由（最最详细简单易通）看这篇就够了
2301_77638787的博客
08-16 5646
Vue2 路由（最最详细简单易通），帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习，在此基础上加强知识的认知深度。
Vue_路由的基本使用步骤
m0_74152912的博客
05-21 786
【代码】Vue_路由的基本使用步骤
vue2 vue-router引入使用详解
蓑笠翁
12-13 2892
vue2 vue-router安装使用详解，包含 vue-router安装、路由视图使用、路由跳转传参，路由守卫使用等
把router实例注入到vue根实例中
weixin_37652493的博客
04-13 449
把router 实例注入到 vue 根实例中 一、 import Vue from 'vue' import App from './App.vue' // 引入路由 import router from "./router.js" const app = new Vue({ router }).$mount('#app') 二、 import Vue from 'vue' import App from './App.vue' // 引入路由 import router from "./router
在vue中 引入路由
weixin_55761900的博客
05-17 484
3.引入路由到项目（在main.js）指定路由显示入口(在app.vue中)2.配置独立的路由文件。
项目前端（一）、vue项目中引入vue-router路由组件
xiaoixn5的博客
04-27 1528
是否成功引入router路由组件，我们可以查看package.json文件中dependencies标签下是否有vue-router内容，如果有表示引入成功。在文件vue.config.js中添加 lintOnSave: false。
Vue技术栈 - vue-router（路由）插件
Qianmoer的博客
02-06 379
Vue技术栈 - vue-router（路由）插件
vue-router
08-27
Vue Router 是 Vue.js 官方提供的路由管理器。它允许你在 Vue.js 应用中实现单页面应用（SPA）的路由功能。通过使用 Vue Router，你可以定义不同的路由路径和对应的组件，使得在用户访问不同的路径时，能够动态地加载相应的组件内容，实现页面的切换。 Vue Router 提供了路由配置的方式，可以在路由配置中定义各个路径对应的组件，并且可以设置路由参数、路由守卫等。 在 Vue.js 应用中使用 Vue Router 需要先安装依赖包。你可以使用 npm 或 yarn 进行安装，命令如下： ```bash npm install vue-router # 或者 yarn add vue-router ``` 安装完成后，你需要在你的 Vue.js 应用中引入 Vue Router，并在 Vue 实例中使用它。你可以在入口文件（如 main.js）中进行配置，示例代码如下： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在上面的示例代码中，我们引入了两个组件 Home 和 About，并定义了两个路由路径 '/' 和 '/about' 对应的组件。然后创建了一个 VueRouter 实例，并传入了路由配置。最后，我们将创建的 router 实例传入到 Vue 实例中，使得整个应用具有路由功能。 这只是一个简单的示例，Vue Router 还提供了更多的配置选项和路由功能，比如嵌套路由、命名路由、动态路由等等。你可以查阅 Vue Router 的官方文档来获取更详细的信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值