Vue路由的使用详解
路由1、锚点实现前台路由1.1----效果2、Vue实现前台路由2.1----准备2.2----使用效果3、嵌套路由3.1----使用3.2----效果图4、动态路由4.1----路径带参使用效果图4.2----props传参使用效果图4.3----混合传参使用效果图1、锚点实现前台路由通过onhashchange事件关键组件标签:component用于替换组件:is为替换组件名的变量<di
路由
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
}
})
完结😄~~
更多推荐
所有评论(0)