Vue - 详解路由跳转及路由传参问题

青旅半醒 2021-07-25 13:30 947阅读 0赞

### 在Vue中路由跳转有四种方式 ###

*  一. 路由跳转有四种方式
 *  二. 不带参路由跳转
 *   *  1. router-link
     *  2. this.$router.push()
     *  3. this.$router.replace()
     *  4. this.$router.go(n)
 *  二. 带参路由跳转
 *   *  1. router-link
     *   *  1.1. params 传参
         *  1.2. query 传参
     *  2. this.$router.push()
     *   *  2.1. params 传参
         *  2.2. query 传参
     *  3. this.$router.replace()
     *   *  3.1. params 传参
         *  3.2. query 传参

# 一. 路由跳转有四种方式 #

1.  router-link
2.  this.$router.push() (函数里面调用)
3.  this.$router.replace() (用法同push)
4.  this.$router.go(n)

# 二. 不带参路由跳转 #

## 1. router-link ##

*  路由配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
 *  路由跳转
    
        <router-link :to="{name:'index'}">跳转</router-link>
        <router-link :to="{path:'/index'}">跳转</router-link>

## 2. this.$router.push() ##

*  路由配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
 *  路由跳转
    
        this.$router.push('/index')
        this.$router.push({name:'index'})
        this.$router.push({path:'/index'})

## 3. this.$router.replace() ##

**       用法和`this.$router.push()`一样，`push`效果是进行跳转，`replace`可以理解为非跳转，而是替换当前路由地址**

*  路由配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
 *  路由跳转
    
        this.$router.replace('/index')
        this.$router.replace({name:'index'})
        this.$router.replace({path:'/index'})

## 4. this.$router.go(n) ##

*  **向前或者向后跳转n个页面，n可为正整数或负整数**
 *  **n为正整，则向前跳转**
 *  **n为负数，则向后跳转**

# 二. 带参路由跳转 #

## 1. router-link ##

### 1.1. params 传参 ###

*  不配置路由path参数 ，第一次可请求获取参数，刷新页面，所传参数会消失
    
    路由参数配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
    
    路由传值跳转
    
        <router-link :to="{name:'index',params:{id:1}}">跳转</router-link>
 *  配置路由path参数，刷新页面，所传参数会保留
    
    路由参数配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },
    
    路由传值跳转
    
        <router-link :to="{name:'index',params:{id:1}}">跳转</router-link>
 *  取参数
    
    两种方法可取：  
    html 页面直接使用：`$route.params.id`  
    script 取参：`this.$route.params.id`
    
        <template>
            <div>
                <span>Index页面</span>
                <p>html 取参:{
             {$route.params.id}}</p>
                <p>script 取参{
             {linkOne}}</p>
            </div>
        </template>
        <script>
        export default {
            data(){
                return{
                    linkOne:0
                }
            },
            mounted(){
                this.linkOne=this.$route.params.id
            },
        }
        </script>
        <style scoped>
        </style>

### 1.2. query 传参 ###

*  路由path参数可以不配置，刷新页面，所传参数不会消失
    
    路由参数配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
    
    路由传值跳转
    
        <router-link :to="{name:'index',query:{id:1}}">跳转</router-link>
 *  取参数
    
    两种方法可取：  
    html 页面直接使用：`$route.query.id`  
    script 取参：`this.$route.query.id`
    
        <template>
            <div>
                <span>Index页面</span>
                <p>html 取参:{
             {$route.query.id}}</p>
                <p>script 取参{
             {linkOne}}</p>
            </div>
        </template>
        
        <script>
        export default {
            data(){
                return{
                    linkOne:0
                }
            },
            mounted(){
                this.linkOne=this.$route.query.id
            },
        }
        </script>
        
        <style scoped>
        </style>

## 2. this.$router.push() ##

### 2.1. params 传参 ###

*  不配置路由path参数 ，第一次可请求获取参数，刷新页面，所传参数会消失
    
    路由参数配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
    
    路由传值跳转
    
        this.$router.push({name:'index',params: {id:'1'}})
 *  配置路由path参数，刷新页面，所传参数会保留
    
    路由参数配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },
    
    路由传值跳转
    
        this.$router.push({name:'index',params: {id:'1'}})
 *  取参数
    
    两种方法可取：  
    html 页面直接使用：`$route.params.id`  
    script 取参：`this.$route.params.id`
    
        <template>
            <div>
                <span>Index页面</span>
                <p>html 取参:{
             {$route.params.id}}</p>
                <p>script 取参{
             {routerData}}</p>
            </div>
        </template>
        
        <script>
        export default {
            data(){
                return{
                    routerData:0
                }
            },
            mounted(){
                this.routerData=this.$route.params.id
            },
        }
        </script>
        
        <style scoped>
        </style>

### 2.2. query 传参 ###

*  路由path参数可以不配置，刷新页面，所传参数不会消失
    
    路由参数配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
    
    路由传值跳转
    
        this.$router.push({name:'index',query: {id:'1'}})
 *  取参数
    
    两种方法可取：  
    html 页面直接使用：`$route.query.id`  
    script 取参：`this.$route.query.id`
    
        <template>
            <div>
                <span>Index页面</span>
                <p>html 取参:{
             {$route.query.id}}</p>
                <p>script 取参{
             {routerData}}</p>
            </div>
        </template>
        
        <script>
        export default {
            data(){
                return{
                    routerData:0
                }
            },
            mounted(){
                this.routerData=this.$route.query.id
            },
        }
        </script>
        
        <style scoped>
        </style>

## 3. this.$router.replace() ##

*  **用法和`this.$router.push()`一样，`push`效果是进行跳转，`replace`可以理解为非跳转，而是替换当前路由地址**

### 3.1. params 传参 ###

*  不配置路由path参数 ，第一次可请求获取参数，刷新页面，所传参数会消失
    
    路由参数配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
    
    路由传值跳转
    
        this.$router.replace({name:'index',params: {id:'1'}})
 *  配置路由path参数，刷新页面，所传参数会保留
    
    路由参数配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },
    
    路由传值跳转
    
        this.$router.replace({name:'index',params: {id:'1'}})
 *  取参数
    
    两种方法可取：  
    html 页面直接使用：`$route.params.id`  
    script 取参：`this.$route.params.id`
    
        <template>
            <div>
                <span>Index页面</span>
                <p>html 取参:{
             {$route.params.id}}</p>
                <p>script 取参{
             {routerData}}</p>
            </div>
        </template>
        
        <script>
        export default {
            data(){
                return{
                    routerData:0
                }
            },
            mounted(){
                this.routerData=this.$route.params.id
            },
        }
        </script>
        
        <style scoped>
        </style>

### 3.2. query 传参 ###

*  路由path参数可以不配置，刷新页面，所传参数不会消失
    
    路由参数配置
    
        { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
        { path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
    
    路由传值跳转
    
        this.$router.replace({name:'index',query: {id:'1'}})
 *  取参数
    
    两种方法可取：  
    html 页面直接使用：`$route.query.id`  
    script 取参：`this.$route.query.id`
    
        <template>
            <div>
                <span>Index页面</span>
                <p>html 取参:{
             {$route.query.id}}</p>
                <p>script 取参{
             {routerData}}</p>
            </div>
        </template>
        
        <script>
        export default {
            data(){
                return{
                    routerData:0
                }
            },
            mounted(){
                this.routerData=this.$route.query.id
            },
        }
        </script>
        
        <style scoped>
        
        </style>