- 综合排序
- 最热优先
- 最新优先
- 来自专栏火属性小虫
Vue值Router（路由）2
， 17 8月 2021 作者 847954981@qq.com 前端学习 Vue值Router（路由）2 在路由中，我们除了可以在 <router-link>中写入a标签来定义导航链接，还可以借助 Router实例方法，通过编程代码来实现 编程式导航 两种代码样式 声明式 编程式 <router-link :to=”…”> router.push(…) router.push使用方法 一、router.push 的参数为字符串路径 router.push方法是参数可以是一个字符串路径 router.push('user') router.push('/user') router.push('user') router.push 多个请求并发执行 如要是多个请求并发执行 可以使用 Promise.all async function asyncFn1() { return "优课达"; } async function asyncFn2( "学的比别人好一点"; } async function getAsyncFn() { const result = await Promise.all([asyncFn1(), asyncFn2(
88860编辑于 2023-02-22 - 来自专栏九彩拼盘的叨叨叨
vue-router2 写法示例
用 Vue.js 做单页应用，一般都用 vue-router 做客户端路由。文档地址点这里。 注意：vue-router2 需要配合 Vue2 用。 配置路由 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) var router = new Router( }, }, ... // 找不到路由的默认地址 { path: '*', redirect: '/' } ] }) new Vue '/Index' : ''}.vue`)); }) } HTML 要有 <router-view></router-view> 跳转页面 在 HTML中这么写 <router-link to="/home $router.go(1) router.push、 router.replace 和 router.go 是效仿 window.history API 的。 获取参数 this.
62320发布于 2018-08-24 - 来自专栏全栈开发工程师
Vue Router 路由跳转传参实践
Vue Router 路由跳转传参实践 一、动态路由匹配 1、路由配置 const routes: RouteRecordRaw[] = [ { path: '/', name: ' , { path: '/next-page/:message', name: 'NextPage', component: NextPage, }, ]; 2、 click="toNextPage">toNextPage</button> </template> <script setup lang="ts"> import {useRouter} from 'vue-router 基本数据：{{ route.params.message }} </template> <script setup lang="ts"> import { useRoute } from "vue-router Hello, }, { path: '/next-page', name: 'NextPage', component: NextPage, }, ]; 2、
25700编辑于 2025-01-06 - 来自专栏前端实验室
vue-router原理分析与实践
今天大师兄跟大家简单聊聊Router的实现原理,以及我们如何去实现这样一个插件。 Vue Router 是Vue.js官方的路由管理器。 关于Vue Router的使用就不做过多介绍了,大家可以前往Vue Router官网去学习哦~ vue-router插件的基本使用 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({routes:[]}) export default router import /route' new Vue({ render: h => h(APP), router }) 从上述代码可以看出，router也是作为一个插件去使用的，所以在进行原理实践时候，我们开发的就是一个插件 插件开发思路 定义一个Router类，用来进行所有的router操作。定义一个install方法，将router挂载到Vue的实例上去。
37411编辑于 2022-12-02 - 来自专栏前端实验室
vue-router原理分析与实践
今天大师兄跟大家简单聊聊Router的实现原理,以及我们如何去实现这样一个插件。 Vue Router 是Vue.js官方的路由管理器。 关于Vue Router的使用就不做过多介绍了,大家可以前往Vue Router官网去学习哦~ vue-router插件的基本使用 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({routes:[]}) export default router import /route' new Vue({ render: h => h(APP), router }) 从上述代码可以看出，router也是作为一个插件去使用的，所以在进行原理实践时候，我们开发的就是一个插件 定义一个install方法，将router挂载到Vue的实例上去 注册全局组件router-link和router-view，router-link组件解析为一个a标签，router-view解析为一个
50400发布于 2021-11-06 - 来自专栏前端数据可视化
Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex）
项目目录如下所示 1.2、安装 vite 对 vue2 支持的插件 要在 vite 里运行 vue2 项目，需要安装一个 vite 的插件：vite-plugin-vue2 npm install vite-plugin-vue2 1.3、安装 vue 依赖 使用以下命令安装 vue2。 npm run build 打包出来的项目目录名是：dist image.png 2、安装 vue-router 2.1、安装 npm install vue-router 在写本文时，使用以上命令安装的 vue-router 是支持 Vue2 项目的。 /App.vue' import router from './router/index.js' new Vue({ router, render: h => h(App) }).
8.1K62编辑于 2022-04-15 - 来自专栏前端小叙
vue-router 2 跳转失败原因
$router.push('/'); }).catch((error) => { alert("aaa
74480发布于 2018-04-12 - 来自专栏老怪兽的前端之旅
Vue Router
本章简介
84310编辑于 2023-02-22 - 来自专栏Java 学习
Vue Router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 src="https://unpkg.com/vue-router/dist/vue-router.js"></script> ☞ 语法（src\router/index.js） import Vue from 'vue' import Router from 'vue-router' // 增加这一行, 作用是引入 MyPage 这个组件 import MyPage from '@/components ; } #nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active , component: User }, { path: '/user/2', component: User }, ] 1.2.5 嵌套路由 ☞ 概述 实际生活中的应用界面，通常由多层嵌套的组件组合而成
1.4K30发布于 2020-09-28 - 来自专栏青年码农
Vue3项目使用Vue-router4（对比vue2配合Vue-router3）
使用脚手架搭建的Vue3项目默认使用的路由版本是4，由于Vue3和Vue2写法差异较大，所以需要从新熟悉Router用法，本篇文章比较下两个版本的写法差异，不做深层次的讲解，主要是我也不懂。 1 Vue2配合Vue-router3 说多了没用，直接上代码 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter 2 Vue3配合Vue-router4 import { createRouter, createWebHistory } from "vue-router"; import login from ". 3 跳转 Vue3和Vue2版本跳转区别挺大，因为this的问题。 Vue2跳转 this. $router.push({ path: "/index" }); Vue3跳转 import { useRoute, useRouter } from "vue-router"; export
4.2K1414发布于 2021-01-05 - 来自专栏Vue2
vue2进阶篇：vue-router之router-link的replace属性
$router}, */}</script>Home.vue<template>
<h2>Home组件内容</h2>- <router-link 《vue2进阶篇：路由》第10章：vue-router，包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件2. vue2进阶篇：安装路由3.vue2进阶篇：vue-router之基础路由4.vue2进阶篇：vue-router之嵌套（多级）路由5.vue2进阶篇：vue-router之路由的query参数6.vue2 进阶篇：vue-router之命名路由7.vue2进阶篇：vue-router之路由的params参数8.vue2进阶篇：vue-router之路由的props配置9.vue2进阶篇：vue-router 之router-link的replace属性10.vue2进阶篇：vue-router之编程式路由导航11.vue2进阶篇：vue-router之缓存路由组件
41210编辑于 2024-10-12来自专栏花猪的学习记录Vue学习-Vue router
前言 本文将介绍Vue-router的使用。 ---- Vue-router 前端路由 前端路由的核心就是改变URL，但是页面不进行整体的刷新。 , 安装插件 Vue.use(VueRouter) // 2.创建VueRouter对象（将routes属性抽离出来写） const routes = [ ] const router = new 文件的模板中加入<router-link>和<router-view>的标签： <template>
<h2>我是首页</h2>我是首页内容
<router-link query#fragment 首先创建一个Profile.vue文件： <template><h2>我是概述</h2>{{$route.query.name}} 对象中创建）： <template>
<h2>我是首页</h2>我是首页内容
<router-link to="/home/news">新闻</router-link4.8K20编辑于 2022-02-17来自专栏全栈开发工程师【Vue Router】013-Vue Router 与组合 API
1.13 Vue Router 与组合 API 1.13.1 概述 实际上，我们在上面的代码里面已经尽量使用组合 API 了，在这里进行一个总结。 代码示例如下： import { useRouter, useRoute } from 'vue-router' export default { setup() { const router , onBeforeRouteUpdate } from 'vue-router' export default { setup() { // 与 beforeRouteLeave 相同， 1.13.4 useLink* Vue Router 将 RouterLink 的内部行为作为一个组合式 API 函数公开。 它提供了与 v-slot API同的访问属性： import { RouterLink, useLink } from 'vue-router' export default { name:
37810编辑于 2025-01-06来自专栏全栈程序员必看Vue router原理
总结： vue-router是vue项目的重要组成部分，用于构建单页应用。单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。 路由的本质就是建立url和页面之间的映射关系 router 模式 hash / history hash模式是vue-router的默认模式。 1.url改变 2.触发事件监听 3.改变vue-router中的current变量 4.监视current变量的监视者 5.获取新的组件 6.render // 存储全局使用的Vue对象 let = Vue // 将main文件中实例化Vue对象时传入的router对象添加到Vue的原型链上。 $options.router) { _Vue.prototype.$router = this.
70610编辑于 2022-09-18来自专栏solate 杂货铺vue-router
vue router vue-router 就是封装 浏览器中history。 使用vue-router用来构建SPA <router-link to='/'></router-link> 或者 this. $router.push({path: '/'}) 相当于 <router-view></router-view> 主键的渲染 动态路由 模式 匹配路径 $router.params $router.push('name') this.$router.push({path:'name'}) this.$router.push({path:'name? name='title'></router-view> <router-view name='img'></router-view>
76810发布于 2019-07-22来自专栏繁依Fanyi 的专栏Vue Router 详解
Vue Router 是 Vue.js 生态系统中的一个核心插件，旨在帮助开发者轻松地在单页面应用程序 (SPA) 中实现路由功能。 在这篇博客中，我们将深入探讨 Vue Router 的各个方面，包括其基本概念、配置和高级用法。 1. 什么是 Vue Router？ Vue Router 是 Vue.js 的官方路由管理器。 2. 安装 Vue Router 首先，确保你已经安装了 Vue.js。 然后，可以通过以下方式安装 Vue Router： npm install vue-router 在你的 Vue 项目中，创建一个 router 文件夹，并在其中创建 index.js 文件，用于配置路由 /App.vue' import router from '.
51210编辑于 2024-08-04来自专栏岳泽以博客Vue Router——路由
vue-router的基本用法 vue-router是vue.js官方给出的路由解决方案。 2.2安装vue-router与定义路由组件 在vue3的项目中，只能按照并使用 vue-router 4.x，安装的命令如下： npm install vue-router@next -S 在项目中定义 ">Tab2</router-link> <! /components/tabs/MyTab1.vue' import Tab2 from '. /components/tabs/MyTab2.vue' const router = createRouter({ routes:[ { path:'
1.6K20编辑于 2022-10-26来自专栏软件工程Vue-Router
三 .Vue-router的功能 *Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，使使用Vue.js轻松构建单页应用程序变得轻而易举。 四 .vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换. 五. 步骤一: 安装vue-router npm install vue-router --save 步骤二: 在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能) 第一步 左边创建导入使用Vue-router并配置映射关系, 使用vue-router的步骤: 第一步: 创建路由组件 第二步: 配置路由映射: 组件和路径映射关系 第三步: 使用路由: 通过<router-link 如何改变Vue-router加载组件的方式?
2.8K10编辑于 2021-12-23来自专栏全栈全栈Vue-Router
Vue-Router 是实现前端路由的插件。通过注册的组件来组织页面加载路组件的方法。 Vue-Router 核心知识 【1】Vue-Router的使用 【2】Vue-Router 的懒加载 【3】 Vue-Router动态路由的使用 【4】Vue-router的嵌套使用 【5】Vue-Router 参数传递 【6】Vue-Router 和route的由来 【7】Vue-Router全局导航守卫 【8】Vue-Router 的Keep-Alive
53210发布于 2020-03-16来自专栏Java小技巧Vue | vue-router基础
Vue-Router路由 概念：路径和组件(页面)的映射(对应)关系 应用场景：实现页面的切换 特点（SPA）： (1)整个应用只有一个入口的网页,是区别MPA(多页面应用) (2)局部刷新,用户体验好 (3)数据传输方便,提高开发效率 (4)首次加载速度慢,不利于SEO Vue-Router声明式导航 vue-router提供了一个全局组件 router-link 来代替 a 标签 router-link : 不要加 / 2.页面中router-link to:"/path" (path 要写完整路径) 路由传参 1.传递参数------query //跳转并携带query 参数,to的字符串写法 /detail", query:{ id:m.id, title:m.title } }"> //接收参数 $route.query.id 2.传递参数 >的replace属性 // 1.作用: 控制路由跳转时的操作浏览器历史浏览记录的模式 // 2.浏览器的历史记录有两种写入方式:分别为 push 和 replace,push是追加历史记录,replace
1.7K30编辑于 2022-05-23腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号