vue-router路径

最新推荐文章于 2024-05-06 20:31:51 发布
最新推荐文章于 2024-05-06 20:31:51 发布
阅读量1.3k 收藏
点赞数
分类专栏： Vue 文章标签： vue vue-router 默认路径 history 路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenyongzhi1218/article/details/103266663
版权

vue-router默认路径

  • 默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容.
    但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以。
  • 如何可以让路径默认跳到到首页, 并且渲染首页组件呢?
    非常简单, 我们只需要配置多配置一个映射就可以了。

  • 配置解析:
    • 我们在routes中又配置了一个映射。
    • path配置的是根路径: /
    • redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了。

HTML5的History模式

  • 我们前面说过改变路径的方式有两种:
    • URL的hash
    • HTML5的history
    • 默认情况下, 路径的改变使用的URL的hash
  • 如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可:

路由代码跳转

  • 有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了
  • 比如, 我们将代码修改如下:

chenyongzhi1218
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router安装和配置方式以及路由默认路径
qq_46071321的博客
01-03 1297
vue-router安装和配置方式认识vue-router安装和使用vue-router 认识vue-router vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面富应用。 可以访问其官方网站对其进行学习：传送门 vue-router是基于路由和组件的。 路由用于设定访问路径，将路径和组件映射起来。 在vue-router的单页面富应用中，页面的路径的改变就是组件的切换。 安装和使用vue-router 步骤一：安装vue-router npm ins
vue路由router
ruantianqing的博客
01-12 259
1 路由数据 当我们在vue中注册了路由之后，每一个组件都会具有两个属性：$route, $router $router 表示路由实例，包含一些切换路由的方法 push 进入一个新页面 back 返回上一个页面 go 返回第一个页面 replace 替换当前的页面 forward 进入下一个页面 $route 存储了路由相关数据 路径，名称，query，动态路由数据(params)等等 注意：在hash策略下，hash属性代表的是第二个#后面的内容 由于这些数据都设置了特性，因此既可以在模板中使用，
Vue2---router(配置路径、路由跳转、相关API、多级路由、路由守卫，两种工作模式)
最新发布
AZURE060606的博客
05-06 1555
需求：在同一个html页面中，左边有两个跳转链接负责切换组件，右边展示不同的组件，仅以切换路由为示例。路由守卫会在用户访问某个路由之前提前进行判断检查和各种操作，确保用户已符合规定的方式访问路由。此时访问路由不会返回任何东西，并触发函数。其他与history基本没有区别。当添加token后便能正常访问。
vue中如何设置路由的默认路径
s___j的博客
09-29 2131
打开router中的index.js文件,在最后输入如下代码： ```python router.beforEach((to,from,next)=>{ #每次请求前都执行如下操作 if to.path ==='/login') return ne...
vue-router路径计算问题
大灰狼的小绵羊哥哥的博客
04-23 3982
昨天刚刚发表了一个前端跨域新方案尝试，今天在开发中就遇到的了问题。http://www.jianshu.com/p/56e1500e4060 起因 前端使用的是vue-router组件的history模式，但是由于我们的整个页面都是从static（静态资源站）load过来的，所以其他页面自然也需要跨域去拿，然而就在跨域的时候 vue-router 出了问题。 分析问题 我们
vue-router 配置根路径， publicPath & base
萝卜芹菜芽
06-18 5249
vue.config.js 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' 配置 publicPath module.exports = { publicPath: isProduction ? 'portal' : '/' }
关于vue-router路径计算问题
08-30
在遇到“vue-router路径计算问题”时，问题的核心通常在于如何正确地处理和配置应用的基础路径(base)。在给定的描述中，开发者遇到了一个特定的情况：前端应用使用 Vue Router 的 history 模式，并且静态资源是从 `...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
导出const路由器：VueRouter =新的VueRouter（{路由：[{路径：'/'，名称：'index'，组件：Index，}，]，}，）; // sitemapMiddleware.js从“ vue-router-sitemap”导入VueRouterSitemap； 从“路径”导入路径； 导入...
解决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-router实现tab标签页（单页面）详解
08-29
Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。 在使用 Vue Router 实现 Tab 标签页时，需要注意页面间层级关系。首先，需要在...
vue2 设置router-view默认路径的实例
10-17
今天小编就为大家分享一篇vue2 设置router-view默认路径的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router资源请求路径错误
qq_40822000的博客
03-03 871
废话不多说，直接上bug 一看就是资源路径错误，请求路径中是相对路径。 解决： 在vue-config.js里面修改publicPath就行： module.exports = { publicPath: "/", // 基本路径 outputDir: "dist", // 输出文件目录 lintOnSave: false, // eslint-loader 是否在保存的时候检查 ...
超详细的Vue-router (路由)
qq_64750772的博客
03-05 1462
由于Vue在 开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起 来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是 SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。 一、安装 如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如...
Vue的router详解
Litt_White的博客
08-20 4363
vue-router参数配置，vue-router的相对路径和绝对路径，带/和不带/的区别，vue-router路由的嵌套使用，vue-router的路由传参，keep-alive的使用，vue-router动态添加路由，删除路由，vue-router导航守卫的使用
vue-router设置默认路由
热门推荐
xiaoxiaoluckylucky的博客
02-26 2万+
vue-router的使用
Vue默认路由
weixin_66664693的博客
05-23 8163
Vue设置默认路由的两种方法
【Vue全家桶】详解Vue Router（一）
QDCXYXZ_的博客
03-25 519
详解Vue Router，了解前端路由以及Vue-Router的基本用法
router vue 多个路径_Vue-router
weixin_42166105的博客
12-30 2148
一、路由配置在一开始用CLi3脚手架创建项目时就已经安装了Vue-Router，下面直接看下初始代码：//main.js import Vue from "vue"; import App from "./App.vue"; import router from "./router"; //引入router import store from "./store"; Vue.config.prod...
vue2的vue-router
07-27
2. 创建路由实例：在Vue应用程序的入口文件中，创建一个新的VueRouter实例，并配置路由规则。 3. 定义路由组件：创建需要被路由管理的组件，并分配对应的路由路径。 4. 注册路由实例：将创建的路由实例注册到Vue...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值