Vue-router中path的设置

最新推荐文章于 2023-09-07 20:44:59 发布
最新推荐文章于 2023-09-07 20:44:59 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： VUE 文章标签： vue.js 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37024887/article/details/129065747
版权

问题描述

一直以来,无论是在设置 routes数组中的path值 、还是在Vue实例的内部通过 $router 进行路由操作的时候，我都搞不清楚到底加不加 /

规律总结

1、 routes数组中的path值

只有 routes数组中 第一层的 path 加 /
在这里插入图片描述

children数组中的 path 不加 /
在这里插入图片描述

2、Vue实例中

在这里插入图片描述

与上面正好相反：
访问routes数组中 第一层的 path前面不加 /

//About.vue
this.$router.push({ path: 'type' })

访问children数组中的 path 前面加 /

//List
this.$router.push({ path: '/type/list/info1'})
this.$router.push({ path: '/type/about'})
五花漏
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
router-path:一个简单，轻便，类型安全的路由器路径实现
03-19
Packula路由器路径
vue路由详解
wangnannan1的博客
07-04 132
总结 路由分为 编程式路由和声明式路由 定义路由对象 const router = new VueRouter({ routes:[ ...
vue-router的path用法
热门推荐
qq_38502227的博客
07-05 1万+
// router 中 index.js import Vue from "vue"; import Router from "vue-router"; import Container from "@/components/Admin/container"; import BarChart from "@/components/Admin/chart/bar/barChart"; import...
Vue-router中对path的误解和说明-path的正确理解。
wangjianbo09的博客
06-03 8432
Date 20210603 By WJB 由于工作需要，最近开始学习Vue框架，遇到的第一个问题是关于路由（router）方面的问题。 管理路由的解释网上有很多文章
vue-router路由跳转，name、params、path、query
pig_ning的博客
06-02 2764
【代码】vue-router路由跳转，name、params、path、query。
web前端之vue路由传参、接收方式、跳转、router-link、replace、params、name、router、query、path、push、to
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
07-29 8347
web前端之vue路由传参、接收方式、跳转、router-link、replace、params、name、router、query、path、push、to
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
vue-router 中router-view不能渲染的解决方法
08-30
例如，在创建 VueRouter 实例时，需要使用 const router = new VueRouter({ routes: routes });，而不是 const router = new VueRouter({ routers: routers });。 此外，开发者还需要确保在 components 中正确地...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
通过这个示例项目，你可以了解到如何在 Vue3.x、Vite 和 TypeScript 的环境中设置和使用 Vue Router 4.x，这将对你的前端开发技能有极大的提升。同时，实践项目也能帮助你更好地理解和掌握这些技术的实战应用。
uniapp中的一个完全相似Vue-router的路由插件
01-20
而 uni-simple-router 是一个专为 uni-app 设计的轻量级路由插件，它的设计思想与 Vue-router 非常相似，旨在简化 uni-app 中的路由配置。 ### 1. 安装和引入 uni-simple-router uni-simple-router 的安装有三种...
解决vue-router 嵌套路由没反应的问题
10-14
const router = new VueRouter({ mode: 'history', routes: [ { path: '/recom', component: Recom, // 假设Recom是父组件 children: [ { path: 'view', name: 'recomView', component: recomView }, { path...
Vue路由（vue-router）详细讲解指南
精选资讯文章
06-05 6614
酷的同时也会给我们带来一些问题，因为使用路由参数时，从/user/xianyu导航到/user/mengxiang，原来的组件实例会被复用，两个路由都渲染同个组件，比起销毁再创建，显示复用显得效率更高，带来的的只管问题就是生命周期钩子函数不会再被调用，也就是不会再被触发；就这样，我们的页面就可以进行路由跳转和切换了，路由的基本使用就完成了；重定向实际上是当匹配到路径符合条件的时候去执行对应的路由，当然这个时候的url上面的地址显示的是对应的路由，页面也是对应的路由页面；
vue-router总结
林木木的博客
06-03 827
Vue Router 摘要
router Path
最新发布
weixin_46183811的博客
09-07 92
import nProgress from 'nprogress'import { createWebHashHistory, createRouter, RouteRecordRaw,} from 'vue-router'declare module 'vue-router' { interface RouteMeta { description: string, parentRouteName: string, showInAside: boolean, //是否在侧边导航栏显
vue-router 详解
OneBaBa的专栏
05-24 2085
to：用于指定跳转的路径tag：tag可以指定之后渲染成什么组件，比如我们下面的代码会被渲染成一个元素，而不是。replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中active-class：当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
Vue 中 route.path 和 route.fullPath 的区别
qq_68155756的博客
07-20 3339
route.path和route.fullPath是Vue Router中route对象的两个属性，用于获取当前路由的路径信息，区别如下： 1. route.path只包含从基本URL后开始的路径，假设基本URL（base URL）为/app，并且当前路由为/app/home?a=1，那么route.path的值将是/home； 2.route.fullPath包含从基本URL后开始的路径，假设基本URL（base URL）为/app，并且当前路由为/app/home?a=1
vue路由中$route与$router，path与name，params与query的区别梳理
meng2lin的博客
12-07 6753
一、router和router和router和route的区别 $router : 是路由操作对象，只写对象 route:路由信息对象，只读对象栗子：//route : 路由信息对象，只读对象 栗子： //route:路由信息对象，只读对象栗子：//router操作 路由跳转 this.$router.push({ name:'hello', params:{ ...
$route 获取当前路径
hyl999的专栏
07-16 1万+
其中<router-view>可以传递props，支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果，被渲染的组件将注册到父级组件的this.$对象上。 路由对象和路由匹配 路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。如 属性 说明 $route.path 当前路由对象的路径，如'/vi $route...
vue $router和$route的区别
锦年的博客
03-28 5654
vue-router中经常会操作的两个对象route和router两个。 1、$route对象 $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 1、 $route.path ：字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。 2、$route.params ：一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。 3、$route.quer
axios如何获取vue-router的path
03-11
可以通过在组件中使用this.$route.path来获取当前路由的path，然后在axios请求中使用该值作为请求的url。例如： ``` import axios from 'axios' import Vue from 'vue' import VueRouter from 'vue-router' Vue....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值