Vue2（路由）

爱被打了一巴掌 2023-10-15 09:06 33阅读 0赞

#### 目录 ####

*  一，路由原理（hash）
 *  二，路由安装和使用（vue2）
 *  三，路由跳转
 *  四，路由的传参和取值
 *  五，嵌套路由
 *  六，路由守卫
 *  最后

## 一，路由原理（hash） ##

`单页应用的路由模式有两种`

1、哈希模式（利用hashchange 事件监听 url的hash 的改变）
    2、history模式（使用此模式需要后台配合把接口都打到我们打包后的index.html上）

`hash模式的原理：`

核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变
    后立刻发起请求，响应整个页面，渲染整个页面比路由的跳转用户体验更好

演示1

## 二，路由安装和使用（vue2） ##

`导入路由插件`

`安装路由插件到Vue中`

Vue.use(VueRouter);

`创建VueRouter对象`

// 路由的安装 前提是要导入路由js
        Vue.use(VueRouter)
    
        // 创建一个登录子组件
        var login = {
        
            template:`
                <div>
                    登录页面    
                </div>
            `,
        }
    
        // 创建路由配置实例，主要实现，路劲和子组件之间的映射
        var myrouter = new VueRouter({
        
            routes:[
                {
        path:'/login/id',name:'login',component:login},
            ]
        })

`使用路由`

<body>
        <div id="app">
            头部
            
            <router-view></router-view>
            尾部
        </div>
    </body>
    <script src="../Vue2/js/vue2.7.js"></script>
    <script src="../Vue2/js/vue-router.js"></script>
    <script>
        // 路由的安装 前提是要导入路由js
        Vue.use(VueRouter)
    
        // 创建一个登录子组件
        var login = {
        
            template:`
                <div>
                    个人页面    
                </div>
            `,
        }
    
        // 创建路由配置实例，主要实现，路劲和子组件之间的映射
        var myrouter = new VueRouter({
        
            routes:[
                {
        path:'/login',name:'login',component:login},
            ]
        })
    
        var app = new Vue({
        
            el:'#app',
            data(){
        
                return{
        
                    
                }
            },
            router:myrouter,
            
        })
    
    
    </script>

示例2

## 三，路由跳转 ##

> 路由的跳转有两种方式：

`使用标签`

<router-link to="/login">登录</router-link>

`编程式路由，使用js`

this.$router.push({
        path:'/login'});
    this.$router.replace({
        path:'/login'});

> 说明：

`1.this.$router.push(); 会向history中添加记录`  
`2.this.$router.replace();不会向history中添加记录。`  
`3.this.$router.go(-1)常用来做返回上一个地址。`

> 路由中的对象：

`1.this.$route 路由信息对象，只读。`  
`2.this.$router 路由操作对象，只写。`

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            头部
            <router-link to="/login">登录</router-link>
            <router-link to="/person">个人</router-link>
            <button @click="toxiaohao">api 王导</button>
            
            <router-view></router-view>
            尾部
        </div>
    </body>
    <script src="../Vue2/js/vue2.7.js"></script>
    <script src="../Vue2/js/vue-router.js"></script>
    <script>
        // 路由的安装 前提是要导入路由js
        Vue.use(VueRouter)
    
        // 创建一个登录子组件
        var login = {
        
            template:`
                <div>
                    登录页面     
                </div>
            `,
           
        }
    
         // 创建一个登录子组件
         var person = {
        
            template:`
                <div> 
                    个人页面 
                </div>
            `,
           
        }
    
        // 创建一个个人页面子组件
        var xiaohao = {
        
            template:`
                <div>
                    王导页面    
                </div>
            `,
        
    
        }
    
        // 创建路由配置实例，主要实现，路劲和子组件之间的映射
        var myrouter = new VueRouter({
        
            routes:[
                {
        path:'/login',name:'login',component:login},
                {
        path:'/person',name:'person',component:person},
                {
        path:'/xiaohao',name:'xiaohao',component:xiaohao}
            ]
        })
    
        var app = new Vue({
        
            el:'#app',
            data(){
        
                return{
        
                    
                }
            },
            router:myrouter,
            methods:{
        
                toxiaohao(){
        
                    this.$router.replace({
        
                        path:'/xiaohao'
                    })
                },
            }
        })
    
    
    </script>
    </html>

示例3

## 四，路由的传参和取值 ##

> 查询参

`配置。查询参可以和path属性匹配，也可以和name属性匹配。`

<router-link :to="{path:'/login',query:{id:queryid}}"></router-link>

`或者`

<router-link :to="{name:'login',query:{id:queryid}}"></router-link>

`或者`

this.$router.push({
        path:'/login',query:{
        id:queryid}});

`取参`

// 此代码可以写到组件的钩子函数中
    this.$route.query.id

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            头部
            <router-link :to="{path:'login',query:{id:loginId}}">带参数登录</router-link>
            <router-link :to="{name:'person',query:{id:personId}}">带参数个人</router-link>
            <button @click="clxiaodao">带参数王导</button>
            
            <router-view></router-view>
            尾部
        </div>
    </body>
    <script src="../Vue2/js/vue2.7.js"></script>
    <script src="../Vue2/js/vue-router.js"></script>
    <script>
        // 路由的安装 前提是要导入路由js
        Vue.use(VueRouter)
    
        // 创建一个登录子组件
        var login = {
        
            template:`
                <div>
                    登录页面     
                </div>
            `, 
            mounted(){
        
                console.log(this.$route.query.id);
            },
        }
    
         // 创建一个登录子组件
         var person = {
        
            template:`
                <div> 
                    个人页面 
                </div>
            `,
            mounted(){
        
                console.log(this.$route.query.id);
            },  
        }
    
        // 创建一个个人页面子组件
        var xiaodao = {
        
            template:`
                <div>
                    王导页面    
                </div>
            `,
            mounted(){
        
                console.log(this.$route.query.id);
            },
        }
    
        // 创建路由配置实例，主要实现，路劲和子组件之间的映射
        var myrouter = new VueRouter({
        
            routes:[
                {
        path:'/login',name:'login',component:login},
                {
        path:'/person',name:'person',component:person},
                {
        path:'/xiaodao',name:'xiaodao',component:xiaodao}
            ]
        })
    
        var app = new Vue({
        
            el:'#app',
            data(){
        
                return{
        
                    loginId:1,
                    personId:2,
                    xiaodaoId:3
                }
            },
            router:myrouter,
            methods:{
        
                clxiaodao(){
        
                    this.$router.push({
        
                        path:'/xiaodao',query:{
        id:this.xiaodaoId}
                    })
                },
            }
        })
    
    
    </script>
    </html>

示例4

> 路由参

`配置路由规则`

var router = new VueRouter({
        
       routers:[
           // 需要在配置路由规则时，使用冒号指定参数
           {
        name:'login',path:'/login/:id',component:LoginVue}
       ]
    });

`配置。意：在这里path和params两个参数不能同时使用`

<router-link :to="{name:'login',params:{id:paramId}}"></router-link>

`或者`

this.$router.push({
        name:'login',params:{
        id:this.paramId}});

`取参`

this.$route.params.id;

**注意：相同路由，但参数不同。造成页面不刷新的问题。**

<router-view :key="$route.fullPath"></router-view>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            头部
            <router-link :to="{name:'login',params:{id:loginId}}">路由登录</router-link>
            <router-link :to="{name:'person',params:{id:personId}}">路由个人</router-link>
            <button @click="apixiaodao">api路由 王导</button>
            
            <router-view></router-view>
            尾部
        </div>
    </body>
    <script src="../Vue2/js/vue2.7.js"></script>
    <script src="../Vue2/js/vue-router.js"></script>
    <script>
        // 路由的安装 前提是要导入路由js
        Vue.use(VueRouter)
    
        // 创建一个登录子组件
        var login = {
        
            template:`
                <div>
                    登录页面     
                </div>
            `, 
            mounted(){
        
                console.log(this.$route.params.id);
            }
        }
    
         // 创建一个登录子组件
         var person = {
        
            template:`
                <div> 
                    个人页面 
                </div>
            `,
            mounted(){
        
                console.log(this.$route.params.id);
            }
        }
    
        // 创建一个个人页面子组件
        var xiaodao = {
        
            template:`
                <div>
                    王导页面    
                </div>
            `,
            mounted(){
        
                console.log(this.$route.params.id);
            }
        }
    
        // 创建路由配置实例，主要实现，路劲和子组件之间的映射
        var myrouter = new VueRouter({
        
            routes:[
                {
        path:'/login/id',name:'login',component:login},
                {
        path:'/person/id',name:'person',component:person},
                {
        path:'/xiaodao/id',name:'xiaodao',component:xiaodao}
            ]
        })
    
        var app = new Vue({
        
            el:'#app',
            data(){
        
                return{
        
                    loginId:1,
                    personId:2,
                    xiaodaoId:3
                }
            },
            router:myrouter,
            methods:{
        
                apixiaodao(){
        
                    this.$router.push({
        
                        name:'xiaodao',params:{
        id:this.xiaodaoId}
                    })
                }
            }
        })
    
    
    </script>
    </html>

示例5

## 五，嵌套路由 ##

`1.路由间有层级关系。他们在模板中也有嵌套关系。`  
`2.可以一次性配置多个路由。`

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <router-view :key="$route.fullPath"></router-view>
        </div>
    </body>
    <script src="../Vue2/js/vue2.7.js"></script>
    <script src="../Vue2/js/vue-router.js"></script>
    <script>
         // 路由的安装 前提是要导入路由js
         Vue.use(VueRouter)
    
        //  导航子组件，一级路由
         var nav = {
        
            template:`
                <div>
                    <router-link :to="{name:'nav.index'}">首页</router-link>    
                    <router-link :to="{name:'nav.person'}">个人中心</router-link>    
                    <router-link :to="{name:'nav.message'}">消息</router-link> 
                    <router-view></router-view>    
                </div>
            `
         }
    
    
         //  首页子组件，二级路由
         var index = {
        
            template:`
                <div>
                    首页    
                </div>
            `
         }
         //  个人中心子组件，二级路由
         var person = {
        
            template:`
                <div>
                    个人中心    
                </div>
            `
         }
         //  消息子组件，二级路由
         var message = {
        
            template:`
                <div>
                    消息  
                </div>
            `
         }
    
         var router = new VueRouter({
        
            routes:[
                {
        
                    path:'/nav/',
                    name:'nav',
                    component:nav,
                    children:[
                        {
        path:'',redirect:'/nav/index'}, 
                        {
        path:'index',name:'nav.index',component:index},
                        {
        path:'person',name:'nav.person',component:person},
                        {
        path:'message',name:'nav.message',component:message},
                    ]
                },
                {
        
                    path:'',
                    redirect:'/nav'
                }
            ]
         })
    
         var app = new Vue({
        
            el:'#app',
            router,
            
         })
    
    
    </script>
    </html>

示例六

## 六，路由守卫 ##

`可以做验证判断`  
`使用路由的钩子函数beforeEach实现`

mounted(){
        
                this.$router.beforeEach((to,from,next)=>{
        
                    console.log(to);
                    if(to.path=='/index'){
        
                        next();
                    }else{
        
                        setTimeout(()=>{
        
                            next()
                        },2000)
                    }
                })
            }

> 完整代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <router-view :key="$route.fullPath"></router-view>
        </div>
    </body>
    <script src="../Vue2/js/vue2.7.js"></script>
    <script src="../Vue2/js/vue-router.js"></script>
    <script>
         // 路由的安装 前提是要导入路由js
         Vue.use(VueRouter)
    
        //  导航子组件，一级路由
         var nav = {
        
            template:`
                <div>
                    <router-link :to="{name:'nav.index'}">首页</router-link>    
                    <router-link :to="{name:'nav.person'}">个人中心</router-link>    
                    <router-link :to="{name:'nav.message'}">消息</router-link> 
                    <router-view></router-view>    
                </div>
            `
         }
    
    
         //  首页子组件，二级路由
         var index = {
        
            template:`
                <div>
                    首页    
                </div>
            `
         }
         //  个人中心子组件，二级路由
         var person = {
        
            template:`
                <div>
                    个人中心    
                </div>
            `
         }
         //  消息子组件，二级路由
         var message = {
        
            template:`
                <div>
                    消息  
                </div>
            `
         }
    
         var router = new VueRouter({
        
            routes:[
                {
        
                    path:'/nav/',
                    name:'nav',
                    component:nav,
                    children:[
                        {
        path:'',redirect:'/nav/index'}, 
                        {
        path:'index',name:'nav.index',component:index},
                        {
        path:'person',name:'nav.person',component:person},
                        {
        path:'message',name:'nav.message',component:message},
                    ]
                },
                {
        
                    path:'',
                    redirect:'/nav'
                }
            ]
         })
    
         var app = new Vue({
        
            el:'#app',
            router,
            mounted(){
        
                this.$router.beforeEach((to,from,next)=>{
        
                    console.log(to);
                    if(to.path=='/index'){
        
                        next();
                    }else{
        
                        setTimeout(()=>{
        
                            next()
                        },2000)
                    }
                })
            }
         })
    
    
    </script>
    </html>

## 最后 ##

`送大家一句话：半山腰总是挤的你要去山顶看看！！！`