精华内容
下载资源
问答
  • vue 路由重定向
    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路由重定向和动态路由 文章目录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>
    

    展开全文
  • 路由重定向: 当用户访问某个连接时,需要让用户自动重新访问另一个连接,这样的一种需求的实现,称为路由重定向 如: 用户地址栏输入:http://localhost:8080/ 最终地址栏显示:...
  • 实际开发项目中,关于登录和路由权限的控制参照了vue-element-admin这个明星项目,并在此基础上基于业务进行了整合,接下来我会以这个项目为例,仔细地剖析整个路由和权限校验的过程,也算是对...
  • 主要介绍了Vue路由 重定向和别名的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 上篇我们说了vue项目的目录设计,本篇我们来学习一下vue路由。路由的作用:在web端路由(route)就是URL到函数的映射,vue的router就像一个容器,分配,处理每一个route到URL中。文档地址:​ vue路由官方文档...
  • 下面小编就为大家分享一篇Vue路由动态重定向和导航守卫实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • url重定向,vue路由重定向,vue路由守卫

    千次阅读 2018-10-24 19:46:03
    一 什么是重定向 重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其他位置。 二 为什么用重定向 举一个例子:比如用户注册完账号后,此时用户点击注册后,那么页面应该取到登录页面, ...
  • vue路由重定向示例

    千次阅读 2019-05-30 21:18:10
    vue路由重定向示例 如果是在根目录,则重定向到/goods {path: '/', redirect: '/goods'}
  • vue路由根据条件跳转到不同的子路由
  • vue 路由重定向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. 尽管已经 涵盖...
  • 路由重定向 路由重定向是指:用户访问 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的官方文档,发现重定向可以解决这个问题。 如之前文件路径是'/live/detail/id=7234','/skill/microList/',新项目路径是 '/s/live/detail?id=7234','/s/live/list' {path: '/live/list(/)?:foo'...
  • 定义 重定向(Redirect)就是...路由重定向需要使用到关键字Redirect和路由钩子函数(beforeEach(to, from, next))来完成,下面通过一个具体的示例来做以说明。 示例 【例】打开web系统,系统一级菜单包括首页、我的、
  • import 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重定向实现方法。分享给大家供大家参考,具体如下: 第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的...
  • vue 项目重定向时需要传参数 1、在项目首页路由因需要进行传参数,例如需要重定向到:path: “/index?from=0” 2、重定向时写法如下: redirect: {path: ‘/index’,query: {from: ‘0’}} //之前默认redirect:’/...
  • Vue路由全方位详解(路由▷跳转/传值/取值/路由重定向/嵌套路由)
  • Vue路由重定向

    2019-03-23 20:45:57
    import 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的核心深度集成,可以非常方便的用于SPA应用程序的开发。 实现路由功能七大步骤 第一步:引入相关的库文件 注意:必须先引用Vue,在引用vue-router 顺序不能颠倒 <!-- 导入 vue 文件 --> <script src=...
  • 1. 标签路由 router-link 注意:router-link中,链接如果是’/'开头则表示从根路由开始;如果开头不带‘/’,则从当前路由开始。 (1)不带参数 <router-link :to="{name:'home'}"> <router-link :to="{...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,541
精华内容 5,816
关键字:

vue路由重定向