vue-router路由的参数和设计 / 网络研习社#15
到了路由功能了。路由分前端路由和后端路由,这里先来看前端。vue有个好用的插件vue-router来解决路由的麻烦,它与组件配合就能很好地组织网页了。
vue-router基本使用:
<script src="./lib/vue-router.js"></script> //先是引包
<div id="app">
<router-link to="/login">login</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>login组件</h1>'
}
var register = {
template: '<h1>register组件</h1>'
}
var router = new VueRouter({
routes: [
{path: '/', redirect: '/login'},
{path: '/login', component: login} , //必须是模板对象,不能是组件名称
{path: '/register', component: register}
]
})
var app = new Vue({
el: '#app',
router
})
</script>
vue-router切换时的当前路径的高亮显示:
<style>
.router-link-active{
color:red;
}
</style>
vue-router路由传参:
1、$route.query
<router-link to="/login?id=10">login</router-link>
var login = {
template: '<h1>login组件---{{ $route.query.id }}</h1>',
created () {
console.log(this.$route.query.id)
}
}
2、$route.params
<router-link to="/login/10">login</router-link>
var login = {
template: '<h1>login组件---{{ $route.params.id }}</h1>',
created () {
console.log(this.$route.params.id)
}
}
var routerObj = new VueRouter({
routes: [
{path: '/login/:id', component: login} ,
{path: '/register', component: register}
]
})
子路由(路由嵌套)的设计
<div id="app">
<router-link to="/login">login</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
<template id="tmp">
<div>
<router-link to="/register/weibo">微博注册</router-link>
<router-link to="/register/phone">手机注册</router-link>
<router-view></router-view>
</div>
</template>
var login = {
template: '<h1>login组件</h1>'
}
var weibo = {
template: '<h1>weibo组件</h1>'
}
var phone = {
template: '<h1>phone组件</h1>'
}
var register = {
template: '#tmp'
}
var router = new VueRouter({
routes: [
{path: '/', redirect: '/login'},
{path: '/login', component: login} ,
{path: '/register', component: register,
children: [
{path: 'weibo',component: weibo},
{path: 'phone',component: phone}
]
}
]
})
命名视图布局(name指定组件名),多个组件布置
<div id="app">
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
var header= {
template: '<h1>header组件</h1>'
}
var left = {
template: '<h1>left组件</h1>'
}
var main = {
template: '<h1>main组件</h1>'
}
var router = new VueRouter({
routes: [
{path: '/', components: {
default: header,
left: left,
main: main
}}
]
})
网络研习社系列文章:
- 微信小程序开发初体验 / 网络研习社#1
- 新技能:小程序空间当图床! / 网络研习社#2
- 小程序云开发中数据的传递形式 / 网络研习社#3
- 如何突破coreldraw的网络限制 / 网络研习社#4
- 我师网小程序初发布,大家多多指教 / 网络研习社#5
- 用github 做文件目录 / 网络研习社#6
- LNMP环境一键安装(一) / 网络研习社#7
- LNMP环境自定义安装(二) / 网络研习社#8
- 利用github做免费博客 / 网络研习社#9
- Nodejs,打开服务器黑匣子 / 网络研习社#10
- 一入前端深似海,聊聊vue.js / 网络研习社#11
- 我们想做的,vue都帮我们做好了 / 网络研习社#12
- vue和小程序一家亲 / 网络研习社#13
- vue的组件面面观 / 网络研习社#14
继续学习中!
加油!