Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录

最新推荐文章于 2022-12-11 21:48:55 发布
最新推荐文章于 2022-12-11 21:48:55 发布
阅读量786 收藏
点赞数
分类专栏： 前端 文章标签： Vue路由(vue-router)配置实战——动态路由，重定向，工程非
李帅帅哦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue router路由机制 别名，重定向，动态路由匹配
NI_computer的博客
10-09 563
别名 /a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样 使用alias设置别名 { path: '/teacher', name: 'teacher-a', //给路由命名方便跳转 component: teacher, alias: '/student' }, 此时访问teacher和student都是在访问teacher 重
Vue Router 的重定向基础和复杂用法详解指南
最新发布
html0010的博客
09-14 7849
Vue Router的重定向功能非常强大，可以根据不同的需求进行设置。无论是基于路径、命名路由、参数还是查询参数，我们都可以根据自己的需求设置重定向。从简单的路径重定向到复杂的条件性和动态重定向，通过合理使用重定向，可以改善用户体验并导航用户到正确的页面。
vue动态设置路由重定向
weixin_57722232的博客
12-02 2408
需求为：项目分为业务系统和后台管理系统，重定向路由‘/’ 在业务系统显示为homepage，在后台管理系统首页显示为 dashboard； 实现 在router.js: importVuefrom'vue' importRouterfrom'vue-router' importLayoutfrom'../layout/index' importstorefrom'@/store' Vue.use(Router) exportconstconstantRouter...
vue路由重定向和动态路由
qq_49723651的博客
04-03 2143
vue路由重定向和动态路由 文章目录vue路由重定向和动态路由vue路由重定向动态路由 vue路由重定向 实现页面跳转一般有两种方式：重定向页面和转发页面。 重定向页面的具体实现方式就是更改页面的URL，跳转到指定的地方。vue中实现路由重定向比较简单： this.$router.push('/home') this.$router.push({name:'Home'}) this.$router.push({path:'/home'}) 动态路由 动态路由就是在路由中携带参数。 // 在定义路由的时候指
vue项目没有router文件夹_Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录...
weixin_39841136的博客
12-30 1591
1. 前言(1) 资料(2) 需求本文是在上篇《使用vue-i18n实现多语言》功能的引申。需要实现的功能如下： 多语言需要反映在url上，英文、简体中文、繁体中文页面需分别为/en、/zhCHS、/zhCHT页面切换后，也能记住上页中选择的语言在页面中先切换语言再刷新，也显示之前选择的语言应用的基路径不在根目录下，而是多一级/snycard2018如果用户load的页面是根目录，要自动定位到正确...
搭建Vue从Vue-cli到router路由护卫的实现
10-15
为了自定义项目配置，可以在项目根目录下创建`vue.config.js`文件。例如，你可以设置公共路径、自定义端口和变量： ```javascript const title = '双11剁手啦' const port = '1111' module.exports = { public...
ppt课件-第9章 Vue路由vue-router.zip
03-22
在项目根目录下运行`npm install vue-router`，然后在主入口文件（如`main.js`）中引入并配置Vue Router，接着挂载到Vue实例上。 配置Vue Router涉及到定义路由对象。每个路由都包含一个路径（path）、一个组件...
Vuejs+vue-router打包+Nginx配置的实例
10-17
关键配置部分是`location /`块，这里使用`try_files`指令处理路由重定向。当用户访问任何路径时，Nginx首先尝试找到该路径对应的静态文件，如果找不到，则尝试路径加斜杠（$uri/），最后如果仍然找不到，就返回`/...
详解Vue项目编译后部署在非网站根目录的解决方案
01-19
同一个生产部署项目，基内外网的访问路径并不相同，内网是基于域名根目录来访问，而外网却指向了一个子目录。 eg. ： vue-router: history模式 内网环境：192.168.1.1:8080/index.html 外网环境：domain....
Vue Router系列之路由重定向
老__L的博客
12-11 4783
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C，从而展示特定的组件页面；通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向。
vue-router 页面跳转，重定向，动态路由
wwwkm123的博客
12-03 1649
路由和传送 路由是决定数据包从来源到目的地的路径 传送将输入端的数据转移到合适的输出端 router.js App.vue 代码方式页面跳转
路由 vue-router 路由守卫 路由重定向 路由嵌套 路由守卫 路由命名 路由懒加载
weixin_49230250的博客
08-28 2306
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 1.基本使用 (1)安装 ①初始化项目时选择安装vue-router ②手动安装 npm i vue-r
Vue-router复习(动态路由、懒加载、重定向、传参、导航守卫、keep-alive)
wingchiehpih的博客
07-27 334
Vue-router复习(动态路由、懒加载、传参、导航守卫、keep-alive) 代码目录结构 页面展示效果 index.js路由配置 import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home.vue'; // 修改路由push方法,阻止重复点击报错 const originalPush = VueRouter.prototype.push; VueRouter.prototyp
Vue中的动态路由、Router守卫、嵌套路由、路由跳转、路由重定向
qq_51066068的博客
05-25 856
目录 Vue中的路由 Vue中的动态路由 Vue中的路由守卫 Vue中的嵌套路由 Vue中的路由跳转 Vue中的路由 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="v....
vue-router 重定向到动态的 path 中
qq_38916811的博客
05-13 1612
vur-router 重定向到动态的 path
Vue2实现动态路由配置
qq_30907143的博客
09-09 9488
关于动态路由有前端实现和后端直接根据登录用户权限返回对应路由表两种方式实现，这里所讲的是偏前端方式实现（根据登录后后端返回用户roles字段进行身份判断）
vue2.0 + router 3. 0 动态添加路由
weixin_46531845的博客
04-13 6528
vue 动态添加路由
vue-router+nginx 非根路径配置方法
09-04
在使用 Vue Router 时，如果我们的应用需要在部署时不是根路径，而是一个非根路径下运行，可以通过以下步骤进行配置。 首先，在项目的 `vue.config.js` 文件中进行配置。如果没有该文件，可以在项目根目录下创建，并添加以下内容： ```javascript module.exports = { publicPath: '/your-sub-path-name/' // 替换为你的非根路径名称 } ``` 然后，在使用 Vue Router 的时候，需要修改路由配置。假设我们有一个路由配置文件 `routes.js`，其中定义了路由路径： ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' Vue.use(Router) export default new Router({ mode: 'history', base: '/your-sub-path-name/', // 替换为你的非根路径名称 routes: [ { path: '/', name: 'home', component: Home }, // 其他路由配置 ] }) ``` 在这个例子中，我们使用了 `base` 字段来指定非根路径的名称。这会告诉 Vue Router 在生成路由链接时，在路径前面添加正确的路径前缀。 接下来，我们需要配置 Nginx 服务器来支持非根路径。打开 Nginx 配置文件，一般是 `/etc/nginx/nginx.conf` 或 `/etc/nginx/conf.d/default.conf`，找到 `location` 配置部分，添加以下内容： ```nginx location /your-sub-path-name/ { # 替换为你的非根路径名称 alias /your-project-path/dist/; # 替换为你的项目部署路径，注意最后的斜杠 try_files $uri $uri/ /your-sub-path-name/index.html; # 替换为你的非根路径名称 } ``` 在这个例子中，我们使用了 `alias` 字段来指定项目所在的路径，`try_files` 字段用于处理路由重定向，确保正确的路由能被找到。 最后，重新启动 Nginx 服务器，让配置生效。 这样，我们就成功地配置了 Vue Router 和 Nginx 来支持非根路径了。现在我们的应用可以在非根路径下运行了。记得根据实际情况替换配置中的相应字段。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值