精华内容
下载资源
问答
  • vue-router使用
    千次阅读
    2022-05-01 00:44:30

    前言

    在前端开发中,使用Vue做项目的时候关于路由的管理处理是非常重要的知识点,路由的管理也是比较常用的,做前端开发的都知道SPA,通过唯一一个HTML页面完成所有组件的展示和切换,不同组件之间的切换需要通过路由来实现。vue-router是Vue的官方路由插件,为的就是Vue单页面开发的路由,处理页面跳转的,那么本篇博文就来分享一下关于vue-router相关的知识点,该知识点在前端求职面试中也是高频考察知识点,这里总结一下,方便查阅使用。

    vue-router概念

        router的中文释义为“路由”,它是计算机网络中非常重要的概念,表示分组从源到目的地时,决定端到端路径的网络范围的进程。换句话说,就是分组数据包从源到目的地,经历了哪些网络节点。在单页应用中,它表示页面的更新过程中所经历的路径变化。

           vue-router是Vue的路由管理器,它是Vue的核心插件,与Vue.js核心深度集成,让使用Vue.js构建单页应用程序变得轻而易举,vue-router就是Vue框架下管理如何进行页面替换和更新的组件。

          vue-router是基于路由和组件:路由用户设定访问路径,将路径和组件映射起来;在vue-router的单页面应用中,页面的路径改变就是组件的切换。

    vue-router特点

       vue-router对特点主要包括以下几点:

    • 嵌套路线映射
    • 动态路由
    • 基于组件的模块化路由器配置
    • 路由参数、查询、通配符
    • 查看由Vue.js的过渡系统提供支持的过渡效果
    • 细粒度导航控制
    更多相关内容
  • 注意:vue-router 2只适用于Vue2.x版本,...import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) 1.定义组件,这里使用从其他文件import进来 import index from './components/inde
  • vue-router使用

    千次阅读 2021-10-09 15:32:08
    一、vue-router基本使用 二、vue-outer嵌套路由 三、vue-router参数传递 四、vue-router导航守卫 五、keep-alive

    一、vue-router基本使用

    1.1 安装vue-router

    	npm install vue-touter --save
    

    1.2 配置路由信息

    	在./src目录下新建router文件夹,然后再改文件夹底下新建index.js文件,
    	然后在main.js导入./router/index
    

    在这里插入图片描述
    在这里插入图片描述

    1.3 使用vue-router

    1.3.1 创建路由组件

    创建两个不同的组件
    在这里插入图片描述

    1.3.2 配置路由映射:路由和组件之间的映射关系

    在这里插入图片描述
    路由的重定向
    在这里插入图片描述

    1.3.3 使用路由:通过<router-link / >,<router-view / >

    在这里插入图片描述

    1.3.4 动态路由

    在路由配置信息中加上需要的动态路由
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    1.3.5 路由懒加载

    官网:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

    可以在路由配置里直接写
    在这里插入图片描述
    也可以在外部定义
    在这里插入图片描述
    在这里插入图片描述

    二、vue-router嵌套路由

    首先新建两个组件
    在这里插入图片描述
    如果我想在one路由嵌套子路由,那么在./router/index.js写上
    在这里插入图片描述
    既然我是在one路由嵌套子路由的,那么就需要在One组件里写上
    在这里插入图片描述
    同时也可以给嵌套路由重定向
    在这里插入图片描述

    三、vue-router参数传递

    3.2 params方式传递参数

    在前文中使用的动态路由时,就是使用params的方式来传递参数;
    ① 在路由配置文件中
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    ③ 取值
    注意,在获取参数值的时候是this.$route.params
    在这里插入图片描述

    3.2 query方式传递参数

    ①在<router-link / >动态绑定query
    在这里插入图片描述
    ②取值
    在这里插入图片描述

    3.3 使用编程式方法传递参数


    在这里插入图片描述

    在这里插入图片描述
    ③取值
    在这里插入图片描述

    四、vue-router导航守卫

    4.1 全局前置守卫

    语法:router.beforeEach((to,from,next) => {});
    当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

    全局前置守卫接收三个参数:

    • to:将要进入的目标路由对象
    • from:从当前正要离开的路由
    • next:一定要调用该方法resolve 这个钩子
    • 在这里插入图片描述

    4.2 全局后置守卫

    语法:router.afterEach((to,from) => {})
    和全局前置守卫区别的是,后置守卫不会接收next();
    在这里插入图片描述

    4.3 路由独享守卫

    语法:在路由配置信息里,beforEnter: (to,from,next) => {}
    在进入某一个路由里面才会触发,
    该守卫的参数和全局前置守卫参数时一致的
    在这里插入图片描述

    4.4 组件内守卫

    在进入某个路由组件内时
    在这里插入图片描述
    注意:beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

    不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
    在这里插入图片描述

    在另外两个守卫里,由于this已经可用了,所以 不支持 传递回调了,也没有必要了

    五、keep-alive

    5.1 keep-alive的使用

    keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或者避免重新渲染;
    在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态,这个时候就需要保存状态,要缓存状态;vue里提供了keep-alive组件用来缓存状态。
    ①,将<router-view / ><keep-alive / >包裹;
    在这里插入图片描述
    ②当期们需要从 one路由进入其他路由时,再返回时希望保留one路由的信息
    在这里插入图片描述

    5.2 keep-alive的属性

    5.2.1 include

    字符串或者正则表达式,表示只有匹配的组件会被缓存
    在这里插入图片描述
    默认表示所有组件都会被缓存

    5.2.2 exclude

    字符串或者正则表达式,表示匹配的组件都不会被缓存
    在这里插入图片描述
    这里的One,Two,就是对应组件的name
    在这里插入图片描述

    六、<router-link / >补充

    <router-link / >是vue本身已经全局注册的组件,组件除了to属性,还有其他一些属性

    6.1 to属性

    表示目标路由,这里可以写入一个字符串,也可以动态绑定
    在这里插入图片描述

    6.2 tag属性

    tag属性默认值 是<a />,当是默认值时,可以省略不写;
    如果我们不希望<router-link / >渲染成<a />标签时,可以使用tag属性来指定想要渲染的效果
    在这里插入图片描述

    6.3 replace属性

    replace属性默认值是false;
    设置 replace 属性时,会调用 router.replace(),也就是在浏览器的返回按钮禁用,replace不会留下history记录
    在这里插入图片描述

    6.4 active-class属性

    active-class属性默值是router-link-active
    <router-link / >匹配路由成功时,会自动给当前元素设置一个router-link-active的class;
    在这里插入图片描述
    如果想要修改这个类名(觉得太长了),那么可以
    在这里插入图片描述
    在这里插入图片描述
    如果有许多地方要修改的话,写起来很麻烦且重复
    在这里插入图片描述
    那么此时可以在路由文件./route/index.js写上
    在这里插入图片描述

    6.5 不使用<router-link / >来实现路由切换

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • Vue-router 使用HTML5模式

    千次阅读 2021-06-11 07:28:00
    Vue-router 使用HTML5模式二哲 web前端开发虽说以前一直知道mode如何配置HTML5模式,但是一直没有真正使用过。顺着思路,看着文档今天依旧搞了好久好久!心好累啊。...

    Vue-router 使用HTML5模式

    二哲 web前端开发

    97ef967cdeb75ae9e90b49b750a1bea9.png

    虽说以前一直知道mode如何配置HTML5模式,但是一直没有真正使用过。顺着思路,看着文档今天依旧搞了好久好久!心好累啊。

    https://router.vuejs.org/zh-cn/essentials/history-mode.html

    先给出具体文档地址,由于我的页面不是纯静态的,所以不能直接用nginx配置,如果你是纯静态的那直接nginx配下就好。

    既然不是纯静态的html文件,所以我是通过node作为中间件渲染index.html。文档也给了一个express的middleware。

    我们首先得知道HTML5模式的坑和原理是什么。

    坑坑坑:如果SPA路由采用HTML5模式,那直接输入url或者F5刷新页面会直接404。锚点模式则不会。但是url好看啊,url好看啊,url好看啊。

    修复原理:后端统一配置路由,所有get请求(这描述得不太确切,知道意思就好)都返回index.html然后前端根据url进行跳转显示即可。

    connect-history-api-fallback这个中间件就是解决这个问题而生的。

    既然是要全都显示index.html,我们就要十分在意自己的项目目录。

    621af470d7fdfd8b4ae01238025165aa.png

    a0d22a92e9d564ea9ac808ac8f213331.png

    fccc4e0e9b20194b864cc213c5c6d4a3.png

    看上去好像一切都没有问题啊,但是事实就是B了狗了,页面怎么访问都是404!直觉告诉我,恩可能是中间件顺序的问题于是我换了下顺序,如下

    ```javascript

    // app.js

    const history = require('connect-history-api-fallback');

    app.use(history());

    require('./config/middleware.config.js')(app, express);

    afb0508f10c1318d577692c15315625b.png

    恩,不出意外依旧404,这就可以确定应该是中间件顺序的问题了。于是最终版,如下

    8664f916e5db83a3fa8dd6f018d7907f.png

    终于可以愉快的欣赏漂亮的url并且感受HTML5模式的SPA了。

    最后别忘了vue-router,routes配置要在最后加上*,当所有url都匹配不到的时候渲染error组件。这样用户乱输入url回车后看见的就都是error组件了。如下

    dd0e83144b22dddc7042ca689251e51d.png

    这样一个HTML5模式的单页应用就完美了。

    展开全文
  • vue-router.js 3.0.1 版本

    2018-04-17 09:57:50
    vue-router 3.0.1 版本 , 2018-04-05 最新版本 .
  • vue-router使用以及搭配路由守卫拦截处理。常用在vue项目中使用vue-router进行路由管理,也会做一些权限以及路由守卫拦截

    常用在vue项目中使用vue-router进行路由管理,也会做一些权限以及路由守卫拦截。

    1. 如果有用户权限可以搭配vue-element-admin(非必须)点击详见文档
    2. 或者自己写…也是很快的

    vue-cli 创建时候,自动有vue-router

    vue-router创建和方式详情见我另一个博客: 点击详见文档

    //src/router/index.js 初始文件
    
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router
    
    

    创建路由守卫处理

    新建src/permission.js 文件

    
    import router from './router'
    import store from './store' // vuex - 非项目必须
    import { Message } from 'element-ui' // element-ui - 非项目必须
    import NProgress from 'nprogress' // 进度条装饰 - 非项目必须
    import 'nprogress/nprogress.css'// 进度条装饰样式 - 非项目必须
    
    NProgress.configure({ showSpinner: false })// NProgress configuration
    
    const whiteList = ['/login', '/register']// 白名单页面-不校验
    
    // 路由跳转前 处理
    router.beforeEach(async (to, from, next) => {
      NProgress.start() //进度条 - 开始 -- 如果没有使用进度条,此行注释
    
      // 操作说明:
      // NProgress.done() //进度条 - 关闭
      // next() //正常跳转不拦截
      // next({ path: '/xxx' }) //拦截跳转指定页面
      // await store.dispatch('LogOut') //vuex - active 调用 await必须配合async 
      // router.addRoutes(arr) // 动态添加可访问路由表
      // 注意一些操作后加 return 防止继续往下执行
      // next({ ...to, replace: true }) //hack方法 - 设置replace:true,这样导航将不会留下历史记录
    })
    
    // 路由跳转后 处理 -- 一般不处理,只关闭进度条
    router.afterEach(() => {
      NProgress.done() // 如果没有使用进度条,此行注释
    })
    
    

    引用挂载

    src/main.js

    // ...
    import '@/permission' // permission control
    //或者:import './permission'
    
    //在 new Vue({ el: '#app', router}) 之前
    

    在这里插入图片描述


    到此本文介绍基本完结。如果对 路由拦截不理解,可以接着看一个项目案例

    // src/permission.js
    import Vue from 'vue'
    import router from './router'
    import store from './store'
    import NProgress from 'nprogress' // progress bar
    import 'nprogress/nprogress.css' // progress bar style
    import { getToken, getUserInfo } from '@/utils/auth' // get token from cookie
    import getPageTitle from '@/utils/get-page-title'
    
    NProgress.configure({ showSpinner: false }) // NProgress Configuration
    
    const whiteList = ['/login', '/login/mobile', '/auth-redirect'] // no redirect whitelist
    
    router.beforeEach(async(to, from, next) => {
      NProgress.start()
      document.title = getPageTitle(to.meta.title)
      const hasToken = getToken()
      const userInfo = getUserInfo()
      if (hasToken && userInfo && hasToken !== 'undefined' && userInfo !== 'undefined') {
        Vue.prototype.is_superior = getUserInfo.is_superior
        if (to.path === '/login') {
          next({ path: '/' })
          NProgress.done()
        } else {
          store.dispatch('permission/generateRoutes', [])
          next()
        }
      } else {
        if (whiteList.indexOf(to.path) !== -1) {
          next()
        } else {
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    })
    
    router.afterEach(() => {
      NProgress.done()
    })
    
    

    活学活用,主要逻辑不变。在上文我介绍了,拦截的各种处理方式


    有问题留言交流 ~~

    展开全文
  • 解释4 页面跳墙中使用 vue-router中的 beforeEach的死循环问题 问题展现 import Router from 'vue-router' const router = new Router({ {path: '/', component: index }, {path: '/login', component: login}, {...
  • 极速的服务启动,使用原生 ESM 文件,无需打包 轻量快速的热重载,始终极快的模块热重载(HMR) 丰富的功能,对 TypeScript、JSX、CSS 等支持开箱即用 传统打包方式 基于打包器的方式启动,必须优先抓取并构建你的...
  • vuevue-router使用

    千次阅读 2022-04-21 16:49:52
    一、什么是vue-router Vue RouterVue.js的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。...二、使用vue-router 1.配置路由 //新建index.js用于同一管理路由 ...
  • vue-router报错 TypeError: Cannot read properties of undefined (reading ‘matched‘)
  • 看视频的时候发现vue3的一些基础配置代码有变,比如出使用createApp,app.use(),app.mount(’#app’)等,跟我现在的vue2 new Vue以及vue-router的方法上都有不同,我一直以为自己是vue3,本着追求新事物的想法,下午...
  • Uncaught TypeError:vue_router__WEBPACK_IMPORTED_MODULE_6__.default is not a constructor // 说vue-router默认的不是构造器 然后我检查了一下终端输出的内容,好家伙,说我导入的模块没有找到 "export 'default...
  • Vue-Router路由安装及使用

    千次阅读 2021-07-19 15:45:48
    Vue-Router路由安装及使用 一、安装 vue-router 组件 Notes:在使用脚手架搭建Vue项目时可以选择安装vue-router组件,如果没有安装vue-router组件请看下面步骤。 1.脚手架安装 ​ 在我们使用脚手架创建vue项目时...
  • vuevue-Router 常见面试题

    千次阅读 2022-05-01 10:09:25
    文章目录【vuevue-Router 常见面试题一、vue-Router基本使用二、常见面试题1.vue-router 路由钩子函数是什么 执行顺序是什么2. vue-router 动态路由是什么 有什么问题(1) params 方式(2) query 方式(3) params 和 ...
  • vue-router的安装和基本使用

    千次阅读 2021-07-28 15:38:30
    一、什么是vue-router vue-routervue.js官方路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 vue-router是基于路由和组件的     - 在vue-router的单页面应用中,页面的路径改变就是...
  • vue3.0中vue-router路由的创建及使用

    千次阅读 2021-09-02 09:37:36
    下载vue-router,一定要注意版本! npm install vue-router@/next --save src目录下创建router文件夹,router文件夹下创建index.js vue3.0下需要引入createRouter, createWebHistory 模块去创建路由 ...
  • 使用js监视路径的变化,不同的地址渲染不同的内容,如果需要服务端内容发送ajax。 表现形式的区别: Hash:携带#,#之后是路由地址,可以通过?携带参数。很丑。 https://music.163.com/#/paylist?id=3102977778 ...
  • vue3.0,vue-router的简单使用

    千次阅读 2022-03-30 16:36:10
    vue3.0,vue-router
  • Vue-router路由转发

    千次阅读 2022-04-24 11:40:05
    vue-router路由转发
  • axios的用法与vue2的差别不大,就是一些ts的语法问题,所以也就不对axios的用法做介绍了,本篇来介绍下vue-router路由的使用。 本篇也不从创建项目开始了,对vite+vue3这套项目不了解的可以看下《vite+vue3+ts简单...
  • vue-router 详解

    万次阅读 多人点赞 2021-01-16 12:15:20
    文章目录1、认识vue-router2、安装和使用vue-router 1、认识vue-router 目前前端流行的三大框架,都有自己的路由实现: Angular的ngRouter React的ReactRouter Vuevue-router vue-routerVue.js官方的路由插件...
  • Vue-router使用(vue3.0版本)

    千次阅读 2021-08-20 15:17:47
    vue-router 使用过程一级目录二级目录三级目录 一级目录 vue-router有三个概念 route, routes, router。 1, route,一条路由,它是单数,点击内容后跳转到指定内容,index按钮 => index内容, 这是一条route, ...
  • 文章目录uniapp H5使用uni-simple-router完全使用vue-router开发1、步骤1.1 npm安装1.2 效果1.3 直接上代码吧,简单明了1.3.1 先看vue.config.js1.3.2 App.vue文件1.3.3 router目录1.3.4 其它目录文件2、注意点 ...
  • vue-cli3中使用vue-router

    千次阅读 2020-11-24 14:53:59
    在项目中使用vue-router管理路由,分为以下几步 第一步:在终端(terminal)中安装vue-router npm install -g vue-router 第二步:在src目录下创建一个router文件夹,在...import vueRouter from 'vue-router' //引入
  • 关于Vue问题:in ./node_modules/_vue-router@4.0.14@vue-router/dist/vue-router.esm-bundler.js
  • 最近因为业务需要,实现了一个简单的前端 router,正好也来看一下 vue router ...import VueRouter from 'vue-router'; 利用 vue 的插件机制,加载 vue-router: Vue.use(VueRouter); 实例化 VueRouter: const rout
  • :vue-router版本太高和vue2起冲突了,虽然router4.X的大部分的 Vue Router API 都没有变化,但vue-router 3.x 只能结合 vue2 进行使用~(网上查的说法,我翻了下router官方文档没找到这样的 解决也很简单:**卸载4版本的...
  • Vue路由——vue-router

    千次阅读 2022-01-27 23:18:11
    前端路由与后端路由 路由 路由(routing):指从源到目的地时,决定端到端路径的决策过程。 路由分为两大类:前端路由和后端...const router=express.Router() router.get('/login',function(req,res){ 路由的处理函数
  • vue3.0中使用vue-router

    千次阅读 2022-03-29 10:48:04
    提示:项目是使用vue3+vite构建的 1、安装vue-router npm install vue-router@next -S 2、在src的目录下创建一个文件夹router router/index.js文件 import { createRouter, createWebHashHistory } from 'vue-...
  • vue3如何使用vue-router

    千次阅读 2021-06-16 11:04:13
    文章目录一、第一步:安装vue-router二、第二步:main.js三、路由文件四、app.vue四、使用(比如跳转) 一、第一步:安装vue-router npm install vue-router@4.0.0-beta.13 二、第二步:main.js 先来对比一下vue2...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 230,215
精华内容 92,086
关键字:

vue-router使用

友情链接: levy改进pso_0801.rar