Vue路由的使用详解

1、锚点实现前台路由

通过onhashchange事件
关键组件标签:component 用于替换组件
:is为替换组件名的变量

<div id="app">
        <!-- 切换组件的超链接 -->
        <a href="#/zhuye">主页</a>
        <a href="#/shejiao">社交</a>
        <a href="#/friend">好友</a>
        <a href="#/my">我的</a>
        <hr/>
        <!-- 动态替换 -->
        <!-- 组件占位符 -->
        <component :is="comName"></component>
    </div>

//定义组件
    var zhuye={
        template:'<h1>主页信息</h1>'
    }
    var shejiao={
        template:'<h1>社交信息</h1>'
    }
    var friend={
        template:'<h1>好友信息</h1>'
    }
    var my={
        template:'<h1>我的信息</h1>'
    }
    var vm=new Vue({
        el:"#app",
        data:{
            comName:'zhuye'
        },
        components:{
            zhuye:zhuye,
            shejiao:shejiao,
            friend:friend,
            my:my
        }
    })
    //#/zhuye---/zhuye
    window.onhashchange=function(){
        let path=location.hash;
        console.log(path.slice(1));
        switch(path.slice(1)){
            case '/zhuye':
                this.vm.comName='zhuye';
                break;
            case '/shejiao':
                this.vm.comName='shejiao';
                break;
            case '/friend':
                this.vm.comName='friend';
                break;
            case '/my':
                this.vm.comName='my';
                break;
        }
        // console.log(location.hash);
    }

.slice分割字符串,将#去除

1.1----效果

点击哪里就显示对应的信息

---

2、Vue实现前台路由

2.1----准备

安装并且引入vue-router
此处讲解版本4.0以下的

npm i vue-router	安装完毕后找到vue-router.js

引入

<script src="../Vue01/js/vue-router.js"></script><!--版本要4.0以下-->

2.2----使用

路由占位符<router-view></router-view>
路由组件关键词<router-link></router-link>
方法:to=路径

<div id="app">
        <!-- 切换组件的超链接 -->
        <router-link to="/zhuye">主页</router-link>
        <router-link to="/shejiao">社交</router-link>
        <router-link to="/friend">好友</router-link>
        <router-link to="/my">我的</router-link>
        <hr/>
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>

创建路由对象并且挂载到vue上
redirect重定向,设置访问时默认显示页面

var zhuye={
        template:'<h1>主页信息</h1>'
    }
    var shejiao={
        template:'<h1>社交信息</h1>'
    }
    var friend={
        template:'<h1>好友信息</h1>'
    }
    var my={
        template:'<h1>我的信息</h1>'
    }
    //创建路由对象      挂载到vue上
    var router=new VueRouter({
        routes:[
            {path:'/',redirect:'/zhuye'},   //redirect重定向
            {path:'/zhuye',component:zhuye},
            {path:'/shejiao',component:shejiao},
            {path:'/friend',component:friend},
            {path:'/my',component:my}
        ]
    });
   
    var vm=new Vue({
        el:"#app",
        router:router
    })

效果

与上方效果一致

---

3、嵌套路由

即路由里边嵌套一个子路由

3.1----使用

 <div id="app">
        <!-- 切换组件的超链接 -->
        <router-link to="/zhuye">主页</router-link>
        <router-link to="/register">注册页</router-link>
        <hr/>
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>

var zhuye={
        template:'<h1>主页信息</h1>'
    }
    var register={
        template:`
        <div>
        <h1>注册页内容</h1>
        <!--子路由-->
        <router-link to="/register/tab1">Tab1</router-link>
        <router-link to="/register/tab2">Tab2</router-link>
        <!--子路由占位符-->
        <router-view></router-view>
        </div>
        `
    }
    var Tab1={
        template:'<h1>Tab1信息</h1>'
    }
    var Tab2={
        template:'<h1>Tab2信息</h1>'
    }
    //创建路由对象      挂载到vue上
    var router=new VueRouter({
        routes:[
            {path:'/',redirect:'/zhuye'},   //redirect重定向
            {path:'/zhuye',component:zhuye},
            {path:'/register',component:register,
            children:[
            {path:'/register/tab1',component:Tab1},
            {path:'/register/tab2',component:Tab2}
            ]},
            
        ]
    });
   
    var vm=new Vue({
        el:"#app",
        router:router
    })

3.2----效果图

即点击注册页显示注册页内容并且点击内部子信息显示子信息…

---

4、动态路由

4.1----路径带参

使用

获取数据:{{$route.params.参数名}}

<div id="app">
        <!-- 切换组件的超链接 -->
        <router-link to="/zhuye/1">主页</router-link>
        <router-link to="/zhuye/2">主页</router-link>
        <hr/>
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>

var zhuye={
        template:'<h1>主页信息---拿到参数id{{$route.params.id}}</h1>'
    }
     //创建路由对象      挂载到vue上
    var router=new VueRouter({
        routes:[
            {path:'/',redirect:'/zhuye'},   //redirect重定向
            {path:'/zhuye/:id',component:zhuye}
        ]
    });
   
    var vm=new Vue({
        el:"#app",
        router:router
    })

效果图

点击两个主页得到对应传来的参数

---

4.2----props传参

关键词:props{数据}
语法:
props:route=>({数据})
不足:只能获取到props传的参数,同时路径上的参数获取不到!!!

使用

<div id="app">
        <router-link to="/register/湖南长沙">注册页</router-link>
        <hr/>
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>

var register={
        props:['name','age','addr'],
        template:`
        <div>
        <h1>注册页内容---拿到参数={{name}}----age:{{age}}---addr:{{addr}}</h1>
        </div>
        `
    }
    //创建路由对象      挂载到vue上
    var router=new VueRouter({
        routes:[
            {path:'/',redirect:'/zhuye'},   //redirect重定向
            {path:'/register/:addr',component:register,//props:true
                props:route=>({name:'碰磕',age:'18'})
            }
        ]
    });
   
    var vm=new Vue({
        el:"#app",
        router:router
    })

---

效果图

成功拿到传来的数据,但是路径上的数据获取不到
所以需要一个终极合体版本!!!

---

4.3----混合传参

关键词:route.params.参数名

使用

<div id="app">
        <router-link to="/register/湖南长沙">注册页</router-link>
        <hr/>
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>

var register={
        props:['name','age','addr'],
        template:`
        <div>
        <h1>注册页内容---拿到参数={{name}}----age:{{age}}---addr:{{addr}}</h1>
        </div>
        `
    }
    //创建路由对象      挂载到vue上
    var router=new VueRouter({
        routes:[
            {path:'/',redirect:'/zhuye'},   //redirect重定向
            {path:'/register/:addr',component:register,//props:true
                props:route=>({name:'碰磕',age:'18',addr:route.params.addr})
            }
        ]
    });
   
    var vm=new Vue({
        el:"#app",
        router:router
    })

效果图

成功得到params传来的参数以及路径上的参数

5、命名路由

关键词:`name`

5.1----根据name跳转

<h1>带名字的路由</h1>
<div id="app">
        <router-link :to="{name:'yonghu'}">通过Name---User</router-link>
        <router-view></router-view>
   </div>

 //组件
    var User={
        template:`
            <div>
            <h1>用户组件</h1>
            </div>
        `
    }
    //路由规则
    var router=new VueRouter({
        routes:[
            {name:'yonghu',path:'/user',component:User}
        ]
    });
    var vm=new Vue({
        el:'#app',
        data:{     
        },
        router          //俩属性名一致可省略写一个就好
    })

点击后能成功跳转到/user

5.2----根据name传参

关键词:params

<div id="app">
        <router-link :to="{name:'yonghu',params:{uid:99}}">通过Name---User</router-link>
        <router-view></router-view>
   </div>

//组件
    var User={
        template:`
            <div>
            <h1>用户组件--{{uid}}</h1>
            </div>
        `
    }
    //路由规则
    var router=new VueRouter({
        routes:[
            {name:'yonghu',path:'/user/:uid',component:User,props:true}
        ]
    });
    var vm=new Vue({
        el:'#app',
        data:{     
        },
        router          //俩属性名一致可省略写一个就好
    })

成功跳转到/user并且能得到传来的uid（99）

6、编程式路由

代码不多，所以就不示例了,知道语法即可🤭~

6.1----根据路径跳

语法

this.$router.push(路径);

6.2----根据历史记录跳

语法

this.$router.go(-1);//-1代表上一步

6.3----根据命名跳

语法

 this.$router.push({     //根据命名跳
                    name:'yonghu',
                    params:{
                        uid:1234
                    }
                })

完结😄~~