vue-router路由——路由、路由的基本适使用 、路由的几个注意点 、多级路由 、路由的query参数、编程式路由跳转 $router 、路由信息 $route、路由守卫、路由元信息、路由查询参数

最新推荐文章于 2024-04-15 11:12:07 发布
最新推荐文章于 2024-04-15 11:12:07 发布
阅读量854 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript 前端框架 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ranran0306/article/details/126185911
版权

目录

一、路由

二、路由的基本适使用 

三、几个注意点 

四、多级路由 

五、路由的query参数 

六、编程式路由跳转 $router 

七、 路由信息  $route

八、路由守卫

九、 路由元信息

十、路由查询参数 

一、路由

  • 路由就是路径和组件的映射关系。
  • 在一个页面里, 切换业务场景
  • 单页面 SPA(single page web application) 应用
  • 整个应用只有一个完整的页面
  • 点击页面中的导航链接不会刷新页面 ，只会做页面的局部更新
  • 数据需要通过ajax请求获取

二、路由的基本适使用 

安装vue-router,命令     npm i vue-router     

应用插件：Vue.use(VueRouter)

编写router配置项

 

 

 

 指定展示位置

三、几个注意点 

  • 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
  • 通过切换，
最低0.47元/天 解锁文章
钟意冉冉
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈vue-router2路由参数注意的问题
11-27
1、vue 路由 如果传递 params 定义路由的时候是 /路由名称：id 获取的时候 ...以上这篇浅谈vue-router2路由参数注意的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
vue-router重定向和路由别名的使用讲解
12-11
一、重定向（你访问这个路径，但他跳到另一个路径，地址栏中显示目标路由的那个路径） “重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b 二、路由别名（就是给这个路由起了个名字，访问这个路由的时候不需要访问path 而是访问alias后面的） /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。 上面对应的路由配置为： const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/
Vue Router 相关理解 基本路由 多级路由
weixin_44230693的博客
06-27 561
Vue Router 相关理解 基本路由 多级路由
Vue-Router4路由传参详解
最新发布
qq_44741577的博客
04-15 1044
当props为一个对象，路由参数key和value就定死了。这两种传参方式一样，本文只以声明式举例，编程式跳转的。query传参的特点参数会在路由路径后面。对象，可以根据这个路由信息按需返回参数。只能接收params参数。函数的参数就是当前的。
Vue (19) — 初识vue-router、路由的基本使用、多级路由
m0_59897687的博客
01-02 670
目录 一、初识vue-router 1.什么是vue-router? 2.对SPA应用的理解 3.对路由的理解 (1).什么是路由？ (2).路由分类 二、路由的基本使用 1.安装vue-router,命令 2.应用插件 3.编写router配置项 4.实现切换 5.指定展示位置 6.几个注意点 三、多级路由（嵌套路由） 1.配置路由规则，使用children配置项 2.跳转 一、初识vue-rou...
Vue route路由
sdgjah2的博客
10-12 1563
vue路由基本使用
详解vue 路由跳转四种方式 (带参数)
Leon_940002463的博客
10-23 6271
1. router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 <...
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router路由参数刷新消失的问题解决方法
08-30
vue-router路由参数刷新消失的问题解决方法 路由参数刷新消失的问题解决方法是 vue-router 中常见的问题，本篇文章将为您提供四种解决方案。 解决方案一：Session & 服务器渲染 传统的解决方案是使用 Session 和...
Vue.js框架入门之vue-router路由的基本使用
01-08
现在来续写第六期——Vue Router路由管理器 一、什么是路由 1、后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 2、前端路由：对于单页面应用程序来说，主要通过URL中...
this.$router.query.redirect是干什么的
weixin_42610671的博客
01-17 1526
this.$router.query.redirect 是 Vue Router 中的一个对象属性，用于获取当前 URL 中的路由参数中名为 "redirect" 的值。这个值通常用于在页面跳转之前记录当前页面的路径，以便在登录之后可以返回到原来的页面。 ...
vue路由笔记记录（建议是使用path+query进行传参）
weixin_38291260的博客
04-16 3417
1.使用$router传参，$route获取参数 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读取 路由...
Vue —— 进阶 vue-router 路由（一）（嵌套路由、query参数、命名路由、params参数、props配置）
HuoZhiyan 的博客
05-22 1090
文章目录一、嵌套路由（多级路由）1. 配置路由规则2. 跳转（写完整路径）3. 实例：嵌套路由 一、嵌套路由（多级路由） 1. 配置路由规则 使用 children 配置项 routes: [ { path: '/about', component: About }, { path: '/home', component: Home, children: [ //通过children配置子级
vue-router（基本使用、路由重定向、多级路由、路由命名、路由的query和params参数&动态路由、路由的props配置）（十一）
qq_48617322的博客
09-11 828
vue-router（基本使用、路由重定向、多级路由、路由命名、路由的query和params参数、路由的props配置）
vue获取id以及重定向路由
有问题可关注公众号：前端研究院 后台输入问题回复
03-19 4603
1.获取ID的方法：     let orderId=this.$route.query.id; 2.路由重定向方法this.$router.push(this.$route.query.redirect || '/login')  
路由
m0_43400684的博客
12-17 223
路由（Router） 路由的默认路径 默认情况下，进入网站的首页，我们希望渲染首页的内容，所以在配置路由的时候，应该让路径默认跳转到首页 实现：只要多配置一个映射即可 const routes =[ { //重定向 path:'', redirect:'/home' }, { path:'/home', component: Home }, { path:'/about',
Vue Router 的params和query传参的使用和区别（详尽）
热门推荐
mf_717714的博客
08-22 17万+
首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读取 ...
vue传参方式：query、params+动态路由传参区别
学习记录
09-07 4761
例如商品列表页面前往商品详情页面，需要传一个商品id; <router-link :to="{path: 'detail', query: {id: 1}}">前往detail页面</router-link>复制代码 c页面的路径为http://localhost:8080/#/detail?id=1，可以看到传了一个参数id=1，并且就算刷新页面id也还...
vue3使用vue-router路由拆分
09-06
在Vue 3中，使用Vue Router进行路由拆分可以帮助你更好地组织和管理你的路由配置。以下是一些步骤来实现路由拆分： 1. 安装Vue Router：首先，确保你的项目中已经安装了Vue Router。可以通过以下命令进行安装： ``` npm install vue-router@next ``` 2. 创建路由模块：创建一个新的模块来定义和配置你的路由。可以创建一个名为`router.js`的文件，并在其中导入Vue和Vue Router： ```javascript import { createRouter, createWebHistory } from 'vue-router'; const routes = [ // 定义你的路由配置 ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 3. 定义路由配置：在路由模块中，通过`routes`数组来定义你的路由配置。每个路由对象应该包含一个`path`属性和一个`component`属性，分别指定路由的路径和对应的组件。 ```javascript import Home from './components/Home.vue'; import About from './components/About.vue'; const routes = [ { path: '/', component: Home, }, { path: '/about', component: About, }, // 更多路由配置... ]; ``` 4. 在主应用程序中使用路由：在你的主应用程序中，导入并使用创建的路由实例。你可以在`main.js`文件中完成这个步骤： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app'); ``` 现在，你已经成功拆分了你的路由配置。你可以在每个组件中使用`<router-link>`和`<router-view>`来进行导航和渲染路由组件。 注意：以上只是一个简单的示例，你可以根据你的项目需求进行更复杂的路由配置和组织方式。不过，以上步骤应该可以帮助你开始使用Vue Router进行路由拆分。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值