-
2020-06-15 14:54:38
vuel 路由重定向。
redirect 配置要写在对需要进行重定向的路由中,不能再新建一个相同path的路由去重定向,这样是没有效果的
{ path: '/main/search', name:'mainSearch', component: mainSearch, //对path: '/main/search'重定向,redirect就要写在这个路由配置中 redirect: '/main/search/music', children:[ { path: '/main/search/music', name:'ResultMusic', component: ResultMusic, }, { path: '/main/search/list', name:'ResultList', component: ResultList, }, { path: '/main/search/mv', name:'ResultMv', component: ResultMv, }, ] },
这样新建一个路由配置再重定向的方法是错误的
{ path: '/main/search', redirect: '/main/search/music', },
更多相关内容 -
Vue 路由重定向
2021-09-23 08:52:05路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面; 通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向: var router = new Vue...路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面;
通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向:
var router = new VueRouter({ routes: [ // 其中,path 表示需要被重定向的原地址,redirect 表示将要被重定向到的新地址 //当用户在地址栏中输入`/`,会自动的跳转到`/user`,而`/user`对应的组件为User {path:'/', redirect: '/user'}, {path:'/user',component: User}, {path:'/register',component: Register} ] })
具体实现的代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!-- 导入 vue 文件 --> <script src="./lib/vue_2.5.22.js"></script> <script src="./lib/vue-router_3.0.2.js"></script> </head> <body> <!-- 被 vm 实例所控制的区域 --> <div id="app"> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> <!-- 路由占位符 --> <router-view></router-view> </div> <script> const User = { template: '<h1>User 组件</h1>' } const Register = { template: '<h1>Register 组件</h1>' } // 创建路由实例对象 const router = new VueRouter({ // 所有的路由规则 routes: [ //路由重定向 { path: '/', redirect: '/user'}, { path: '/user', component: User }, { path: '/register', component: Register } ] }) // 创建 vm 实例对象 const vm = new Vue({ // 指定控制的区域 el: '#app', data: {}, // 挂载路由实例对象 // router: router router }) </script> </body> </html>
-
vue路由重定向
2021-04-21 09:54:28路由重定向很简单,就是指用户在访问地址A的时候,强制用户跳转到B页面,因为我们并不想让用户进入系统就看到白白的毫无功能性的页面,初始定向一般为系统的首页或数据展示部分。 只需通过redirect属性,指定一个新...路由重定向很简单,就是指用户在访问地址A的时候,强制用户跳转到B页面,因为我们并不想让用户进入系统就看到白白的毫无功能性的页面,初始定向一般为系统的首页或数据展示部分。
只需通过redirect属性,指定一个新的路由地址即可var router = new VueRouter({ routes:[ //path表示需要被重定向的原地址,一般为'/',redirect将要被重定向到的新地址 {path:'/',redirect:'/index'} ] })
-
vue路由重定向和动态路由
2022-04-03 16:31:00vue路由重定向和动态路由 文章目录vue路由重定向和动态路由vue路由重定向动态路由 vue路由重定向 实现页面跳转一般有两种方式:重定向页面和转发页面。 重定向页面的具体实现方式就是更改页面的URL,跳转到指定的...vue路由重定向和动态路由
vue路由重定向
实现页面跳转一般有两种方式:重定向页面和转发页面。
重定向页面的具体实现方式就是更改页面的URL,跳转到指定的地方。vue中实现路由重定向比较简单:
this.$router.push('/home') this.$router.push({name:'Home'}) this.$router.push({path:'/home'})
动态路由
动态路由就是在路由中携带参数。
// 在定义路由的时候指定参数 const router1 = createRouter({ history:webHistory, routes:[ { /* 动态路由传参 */ path:'/book_detail/:id', name:'book_detail', component:bookDetail } ] })
点击BookDetail就可以重定向,book1是我们需要传的参数。
<!-- 动态路由传参 --> <router-link :to="{name:'book_detail', params:{id:book1}">BookDetail</router-link>
-
vue路由重定向+路由别名
2021-11-25 19:55:19路由重定向: 当用户访问某个连接时,需要让用户自动重新访问另一个连接,这样的一种需求的实现,称为路由重定向 如: 用户地址栏输入:http://localhost:8080/ 最终地址栏显示:... -
vue路由重定向到登录页面_Vue路由权限控制分析
2020-11-20 07:00:47实际开发项目中,关于登录和路由权限的控制参照了vue-element-admin这个明星项目,并在此基础上基于业务进行了整合,接下来我会以这个项目为例,仔细地剖析整个路由和权限校验的过程,也算是对... -
Vue路由 重定向和别名的区别说明
2020-10-14 19:35:59主要介绍了Vue路由 重定向和别名的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue路由重定向到登录页面_Vue实战—路由轻松设置vue-router(3)
2020-11-20 19:54:00上篇我们说了vue项目的目录设计,本篇我们来学习一下vue路由。路由的作用:在web端路由(route)就是URL到函数的映射,vue的router就像一个容器,分配,处理每一个route到URL中。文档地址: vue路由官方文档... -
Vue的路由动态重定向和导航守卫实例
2020-08-27 20:44:38下面小编就为大家分享一篇Vue的路由动态重定向和导航守卫实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
url重定向,vue路由重定向,vue路由守卫
2018-10-24 19:46:03一 什么是重定向 重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其他位置。 二 为什么用重定向 举一个例子:比如用户注册完账号后,此时用户点击注册后,那么页面应该取到登录页面, ... -
vue路由重定向示例
2019-05-30 21:18:10vue路由重定向示例 如果是在根目录,则重定向到/goods {path: '/', redirect: '/goods'} -
vue路由重定向根据条件跳转到不同的子路由
2021-12-27 10:19:51vue路由根据条件跳转到不同的子路由 -
vue 路由重定向_使用Vue和Vue路由器进行高级路由:重定向和Nav Guard
2020-08-12 14:30:28vue 路由重定向While the basics of routing in Vue.js have already been covered, today we’ll explore some other features Vue Router has to offer such as redirects and navigation guards. 尽管已经 涵盖... -
vue 路由重定向与嵌套路由
2021-01-27 00:04:54路由重定向 路由重定向是指:用户访问 A 地址时,强制用户跳转到 B 地址,例如访问 localhost 强制跳转到 localhost/index 页面。 主要通过路由规则的 redirect 属性,属性值为要跳转的重定向地址,如下代码所示: /... -
Vue路由 重定向和 别名的区别
2018-02-01 13:46:47重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ ...重定向的目标也可以是一个命名的路由: const router = new VueRouter({ routes: -
VUE_路由重定向
2022-01-18 11:49:53重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', ...重定向的目标也可以是一个命名的路由: const router = new VueRouter({ rout -
vue-router重定向不刷新问题的解决
2020-12-09 08:18:30通过阅读vue-router的官方文档,发现重定向可以解决这个问题。 如之前文件路径是'/live/detail/id=7234','/skill/microList/',新项目路径是 '/s/live/detail?id=7234','/s/live/list' {path: '/live/list(/)?:foo'... -
路由重定向——vue路由(四)
2021-07-31 20:30:35定义 重定向(Redirect)就是...路由重定向需要使用到关键字Redirect和路由钩子函数(beforeEach(to, from, next))来完成,下面通过一个具体的示例来做以说明。 示例 【例】打开web系统,系统一级菜单包括首页、我的、 -
vue项目路由重定向以及404页面
2022-02-18 16:28:49import Vue from 'vue' import VueRouter from 'vue-router' import Index from '@/views/Index/Index.vue' import NotFound from '@/views/NotFound/... path: '/', //默认重定向到首页 name: 'dashboard', compon. -
vue嵌套路由与404重定向实现方法分析
2020-12-03 05:26:24本文实例讲述了vue嵌套路由与404重定向实现方法。分享给大家供大家参考,具体如下: 第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的... -
vue2 路由重定向 传参——redirect对象写法
2022-03-01 09:51:05vue 项目重定向时需要传参数 1、在项目首页路由因需要进行传参数,例如需要重定向到:path: “/index?from=0” 2、重定向时写法如下: redirect: {path: ‘/index’,query: {from: ‘0’}} //之前默认redirect:’/... -
Vue路由全方位详解(路由▷跳转/传值/取值/路由重定向/嵌套路由)
2021-12-28 15:32:52Vue路由全方位详解(路由▷跳转/传值/取值/路由重定向/嵌套路由) -
Vue路由重定向
2019-03-23 20:45:57import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import params from '@/components/params' Vue.use(Router) export default new Router({ routes:..... -
Vue Router路由及路由重定向
2020-05-12 18:03:43Vue的核心深度集成,可以非常方便的用于SPA应用程序的开发。 实现路由功能七大步骤 第一步:引入相关的库文件 注意:必须先引用Vue,在引用vue-router 顺序不能颠倒 <!-- 导入 vue 文件 --> <script src=... -
Vue路由跳转的几种方式及路由重定向
2020-06-14 21:14:161. 标签路由 router-link 注意:router-link中,链接如果是’/'开头则表示从根路由开始;如果开头不带‘/’,则从当前路由开始。 (1)不带参数 <router-link :to="{name:'home'}"> <router-link :to="{...