vue路由器

最新推荐文章于 2023-11-07 17:17:23 发布
最新推荐文章于 2023-11-07 17:17:23 发布
阅读量859 收藏 1
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68331234/article/details/124911848
版权

Vue 路由器

路由是是一种映射关系

Vue中的路由是，路径和组件的映射关系

单页面应用：所有的业务都在一个页面编写, 只有一个html

单页面应用好处：开发效率高, 用户体验好

单页面如何切换场景：依赖路由切换显示

路由-vue-router介绍

vue-router模块包

它和 Vue.js 深度集成

可以定义 - 视图表(映射规则)

模块化的

提供2个内置全局组件

声明式导航自动激活的 CSS class 的链接

Vue路由-组件分类

.vue文件分2类, 一个是页面组件, 一个是复用组件

src/views(或pages) 文件夹

页面组件 - 页面展示 - 配合路由用

src/components文件夹

复用组件 - 展示数据/常用于复用

Vue路由-vue-router使用

  • 安装

yarn add vue-router@3.2.0

  • 1: 导入路由

import VueRouter from 'vue-router'

  • 2. 使用路由插件

在vue中，使用使用vue的插件，都需要调用Vue.use()

Vue.use(VueRouter)

  • 3. 创建路由规则数组

const routes = [ { } ]

  • 4. 根据路由规则数组 创建 路由对象

const router = new VueRouter({

  routes // (缩写) 相当于 routes: routes

})

  • 5. 关联到vue实例

路由展位符 最终路由组件需要被渲染

<router-view></router-view>

导入相关的组件

 例子图：

Vue路由-声明式导航-跳转 router-link

  1. vue-router提供了一个全局组件 router-link
  2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
  3. router-link提供了声明式导航高亮的功能(自带类名)

router-link是 :VueRouter在全局注册的组件, 本质就是a标签

router-link用法： 当标签使用, 必须传入to属性, 指定路由路径值

router-link好处：自带激活时的类名, 可以做高亮

Vue路由-声明式导航-传参

在router-link上的to属性传值, 语法格式如下

  • /path?参数名=值
  • /path/值 – 需要路由对象提前配置 path: “/path/参数名”

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

  • $route.query.参数名
  • $route.params.参数名

Vue路由-重定向

  • 网页打开url默认hash值是/路径
  • redirect是设置要重定向到哪个路由路径

监测默认路由：规则里定义path: '/'

重定向路由路径：redirect配置项, 值为要强制切换的路由路径

Vue路由-404页面

没有找到页面默认给一个404页面

给路由体系里设置404页面：在数组最后一个位置, 插入匹配*的规则, 展示404页面

语法： {

    path: '*' ,

    component:组件名

  }

Vue路由-模式设置

hash路由例如:  http://localhost:8080/#/home

history路由例如: http://localhost:8080/home  (以后上线需要服务器端支持, 否则找的是文件夹)

语法：mode: "history" // 打包上线后需要后台支持, 模式是hash

Vue路由-编程式导航-跳转

push 和 replace 区别  push 发生跳转有历史记录  replace没有历史记录

用JS代码来进行跳转

语法:  this.$router.push({

    path: "路由路径", // 都去 router/index.js定义. 路径前面不能加点

    name: "路由名" // name 跳转需要在 规则数组里配置相同的值

})

Vue路由-编程式导航-传参

使用path 实现编程式导航 只能使用query 方法传递参数

使用 name 实现编程式导航 query｜params 都可以传递参数

语法 ：query / params 任选 一个

this.$router.push({

    path: "路由路径"

    name: "路由名",

    query: {

     "参数名": 值

    }

    params: {

  "参数名": 值

    }

})

对应路由接收   $route.params.参数名   取值

对应路由接收   $route.query.参数名    取值

声明式导航 a 标签实现跳转

编程式导航 一般都是 按钮形式 需要配合js代码 实现跳转

Vue路由-路由嵌套

二级路由配置 :

创建需要的二级页面组件

路由规则里children中配置二级路由规则对象

一级页面中设置router-view显示二级路由页面

二级路由注意点

二级路由path一般不写根路径

跳转时路径要从/开始写全

Vue路由-声明式导航-类名区别

自动添加的2个类名的区别

  • router-link-exact-active  (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名
  • router-link-active             (模糊匹配) url中hash值,    包含href属性值这个路径

Vue路由-全局前置守卫❤️

路由跳转之前, 会触发一个函数

语法: router.beforeEach((to, from, next) =>{})

一定调next(), 才会跳转下一页

路由守卫

to 要去那个路由页面

from 来自那个路由页面

next()是一个函数 没有调用next() 函数表示不发生跳转

next('./index') 表示可以让其跳转到对应的路由

next(false)阻止跳转

// 路由守卫
// to 要去那个路由页面
// from 来自那个路由页面
// next()是一个函数 没有调用next() 函数表示不发生跳转
// next('./index') 表示可以让其跳转到对应的路由
// next(false)阻止跳转
const islogin = true
router.beforeEach((to,from,next)=>{
if(to.path === '/my' && islogin===false){
  alert('请登录')
  next(false)
} else{
  // 放行
  next()
}
})

Vue路由-组件缓存

路由页面切换时, 会执行生命周期方法:

消失: destroyed销毁流程

出现: created初始化流程 - 所有代码重新执行

缓存组件到内存里, 提升切换效率:

用keep-alive, 包裹切换的挂载点即可

Vue路由-组件缓存-匹配缓存

1. 需要先给要区分的组件们, 设置name字段和值

语法： export default {

        name: '组件名'

    }

2. 在keep-alive的时候, 使用include/exclude区分即可

(1) include  包含哪些组件名需要缓存

语法：<keep-alive include="Find">

    <router-view></router-view>

</keep-alive>

(2) exclude ==不==缓存哪些名字的组件

语法：<keep-alive exclude="My,Part">

    <router-view></router-view>

</keep-alive>

Vue路由-组件缓存-新钩子函数

activated     --- 组件被激活状态

deactivated --- 组件被失去激活状态

activated () {
    console.log("发现音乐-组件激活");
},
deactivated () {
	console.log("发现音乐-组件失去激活");
}
全栈^_^小菜鸟
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueRouter基本使用宝典
lonelysnowman的博客
10-27 588
使用了一段时间 Vue2 + Vuex + VueRouter + Element UI 开发之后 发现仅仅只用到了VueRouter的少数浅层功能 大部分高级功能都没有用到 决定看官方文档学习一下 官方文档是最好的学习笔记(●'◡'●)
Vue的路由动态重定向和导航守卫实例
11-29
根据vue官方文档，对于重定向有详细的示例，但是关于使用方法动态重定向的描述却不多，重定向部分的描述如下： 重定向 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b： const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命名的路由： const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] }) 甚至是一个方法，动态
路由 vue-router 路由守卫 路由重定向 路由嵌套 路由守卫 路由命名 路由懒加载
weixin_49230250的博客
08-28 2297
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 1.基本使用 (1)安装 ①初始化项目时选择安装vue-router ②手动安装 npm i vue-r
路由-重定向/导航守卫
weixin_52512511的博客
07-10 129
使用场景一般是路由跳转结束取消loading动画。当访问/uer会重定向到/user/man。
VUE路由全局守卫重定向
weixin_52031970的博客
07-06 2112
两个需求：1、用户点击购买需要下单，并跳转到订单页面，但是如果用户没有登录的话，中间有登录验证，会拦截；2、点击购买的时候，登录校验成功了，跳转到订单页面时，订单已创建，去付款即可。3、处理拦截至登录页，然后点去注册页，完善信息页，再回登录页，再登录进去，依然进去目标order页 一、解决方案对1： 　　大概思路：1、当你想进入http://localhost:8080/order(该页面需要登录授权)，2、检查是否登录，如果没有登录就跳转到登录页，需要将上一页的path(‘/order’)作为que.
Vue笔记--Router路由--VueRouter--重定向、别名、导航守卫、mode
一只勤勤恳恳的小前端
03-17 265
重定向、别名、导航守卫、mode 重定向 redirect 改变路由的跳转路径 示例 { path: '/xxxx', // 改变路由的跳转路径 redirect: '/' } <div id="app"> <!-- 设置router组件 --> <router-link to='/'>首
vue-cart crisgonvue-cart用vue，vuex和vue路由器制成的简单购物车。 由crisgon-Vue.js开发
05-27
vue-cart一个Vue.js项目该项目是使用vue，vuex和vue-router制作的。 https://crisgon.github.io/vue-cart/dist/构建设置＃installdepende vue-cart一个Vue.js项目该项目是使用vue，vuex和vue-router制作的。 ...
Vue+Webpack+Vue路由器+vue资源.rar
最新发布
05-15
Vue+Webpack+Vue路由器+vue资源
songguangyan:描述vue路由器stort
03-05
3，使用vue作为项目的前端开发框架，vue-router配置路由Element-UI库的局部页面，提高开发效率。做好各个页面之间的链接路由转换，配置API实现项目登录等功能4，使用axios技术实现数据交互；封装axios，提高代码的...
vue-auto-routing：自动生成Vue路由器路由
02-27
自动路由自动生成Vue路由器路由。 您可能要使用 ，其中包含有关路由的所有有用功能。安装$ npm install -D vue-auto-routing要求webpack> = v4.0.0用法vue-auto-routing通过使用自动解析Vue路由器路由。 路由是使用...
管理：vue，vue路由器，vuex
02-15
经理项目设置yarn install编译和热重装以进行开发yarn serve编译并最小化生产yarn build整理和修复文件yarn lint自定义配置请参阅。
前置路由守卫
yasuo56的博客
08-18 384
前置路由守卫。
Vue中的动态路由、Router守卫、嵌套路由、路由跳转、路由重定向
qq_51066068的博客
05-25 845
目录 Vue中的路由 Vue中的动态路由 Vue中的路由守卫 Vue中的嵌套路由 Vue中的路由跳转 Vue中的路由 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="v....
大前端基础【5-1笔记】react路由、嵌套路由、重定向、路由守卫、懒加载，，，你要的这里都有
球球博客
08-28 222
1、路由基本使用 安裝模块 cnpm install react-router-dom -S index.js中引入 import { HashRouter } from 'react-router-dom' ReactDOM.render( <React.StrictMode> <HashRouter><App /></HashRouter> </React.StrictMode>, document.getElemen
路由守卫之全局前置守卫与全局后置守卫
weixin_65100963的博客
05-12 641
全局前置守卫 pageA -----守卫----> pageB 路由跳转之前, 会触发一个函数 语法：router.beforeEach((to, from, next) => {}) 案例: 在跳转路由前, 判断用户登陆了才能去<我的音乐>页面, 未登录弹窗提示回到发现音乐页面 实现： ● 在router/index.js 路由对象上使用固定方法beforeEach // 路由守卫 // 每次页面跳转，都会执行这个回调 router.beforeEach((to,
Next.js 路由守衛應用
weixin_46803507的博客
07-29 2751
Next.js 路由守衛應用前言正文需求背景錯誤示範HOC 輪子redirect結語 前言 這篇文檔要來總結的是關於在項目中實踐對於 Next 路由守衛、身份認證等機制的實現方法，以及在 Next 中具體要如何使用，和一些自己的採坑紀錄。 正文 需求背景 在我的項目中，需求其實也很常見。對於登陸，我使用的是 JWT token 的認證方式，並且存儲於前端 cookie 瀏覽器中。需求就是希望可以在用戶登陸前檢查 cookie 的 token，如果有 token 才可以允許所有路由放行，如果無 token 則
vue路由守卫
wenjiangwang的专栏
11-07 114
路由守卫
vben admin 2.路由权限、前置守卫循环重定向死循环问题
郝开的博客
05-25 3429
vben admin 路由权限、前置守卫循环重定向死循环问题vue导航守卫vue路由权限全局前置守卫使用方法vue Router 方法 addRoutevben admin搜索addRoute定位路由文件setupRouterGuardcreatePermissionGuardrouter.beforeEach前置守卫白名单的作用：避免前置守卫循环重定向导致死循环router.addRoute添加路由权限getMenuList()获取菜单 vue路由权限思路都是基于导航守卫，然后addRoute添加权限去做
路由守卫的参数to,from,next是什么？怎么用？
TangMonk的博客
09-15 1573
的信息，如路径、参数、查询参数等。你可以使用这个参数来检查用户试图访问的目标路由，并基于这些信息决定是否允许访问。包含了有关当前路由的信息，如路径、参数、查询参数等。你可以使用这个参数来执行一些操作，例如记录用户从哪个路由来。可以接受一个参数，它可以是一个字符串，也可以是一个路由对象，用于指定用户应该导航到哪个路由。来告诉 Vue Router 是否允许用户进入目标路由，以及在何种情况下允许。比如：全局前置守卫做登录验证。
vue路由器的基本配置
09-13
Vue 路由器的基本配置包括以下几个步骤： 1. 安装 Vue 路由器：在项目中安装 vue-router 包，可以使用 npm 或者 yarn 进行安装。 ```bash npm install vue-router ``` 2. 在 Vue 项目中创建路由器实例：在项目的入口文件中（通常是 main.js），导入 vue-router，并创建一个新的路由器实例，然后将其挂载到 Vue 实例上。 ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ routes: [ // 这里定义路由配置 ] }) new Vue({ router, // 其他配置项... }).$mount('#app') ``` 3. 配置路由表：在创建路由器实例时，通过 `routes` 属性配置路由表，即定义各个页面的路由路径、组件等信息。 ```javascript const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, // 其他路由配置... ] ``` 4. 设置路由出口：在 Vue 组件中，设置一个 `<router-view>` 标签来显示当前匹配到的组件内容。这样，在导航到不同的路由时，对应的组件会渲染在该位置。 ```html <template> <div> <router-view></router-view> </div> </template> ``` 5. 导航链接和动态路由：使用 `<router-link>` 标签来创建导航链接，通过 `to` 属性指定目标路由路径。同时，Vue 路由器还支持动态路由，可以在路由配置中使用占位符来匹配不同的路由参数。 ```html <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link> // 路由配置示例 const routes = [ { path: '/user/:id', name: 'user', component: User } ] ``` 这些是 Vue 路由器的基本配置步骤，通过以上几个步骤，你可以开始构建 Vue 单页应用的路由功能。当然，还有更多高级用法和配置选项，可以根据具体需求进行深入学习和使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值