Vue_02_vue-router的基本使用
Vue-router
官方地址
在web中，路由分前端路由和后端路由。在后端路由中，每个URL都对应着服务器的一个资源；前端路由则负责实现页面跳转，不与服务器做交互。在大型单页面应用中，使用Vue配合Vue-router插件，可以很好的实现前端路由的跳转，让构建单页面应用变的简单
vue-router原理
通过3种方法实现路由跳转
①：hash，默认（#）
②：history，HTML5新特性，比较新颖
③：abstract，用于非浏览器环境（node）
浅谈vue-router原理
基本使用
引入vue-router、vue。vue-router依赖vue，所以，vue必须在前面引用
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
通过VueRouter构造函数，创建router对象
// 通过VueRouter构造函数，创建router对象
var routerObj = new VueRouter({
routes: [
// route对象
{
path: '/',
redirect: '/login' //将根路径重定向到/login
},
{
path: '/login',
// 组件对象
component: {
template: '登陆组件
'
}
},
{
path: '/register',
component: {
template: '注册组件
'
}
}
]
})
将创建的router对象注册到vue实例的router对象中
var vm = new Vue({
el: '.app',
router: routerObj
})
在HTML中通过
<div class="app">
<router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
路由的传参
使用query对象传参
下面代码将匹配’？'后面的参数，以对象的方式加入到路由组件的$router的query对象中
<body>
<div class="app">
<router-link to="/login?name=ZZZ">登陆</router-link>
<router-view></router-view>
</div>
</body>
<script>
var router = new VueRouter({
routes: [
{
path: '/login',
component: {
template: 'name---{{$route.query.name}}
',
created() {
console.log(this)
}
}
}
]
})
var vm = new Vue({
el: '.app',
router
})
</script>
使用params对象传参
在定义route对象的path时，将params对象用:name语法定义好。router-link的to属性会完全匹配path路径
<body>
<div class="app">
<router-link to="/login/1/LYC">登陆</router-link>
<router-view></router-view>
</div>
</body>
<script>
var router = new VueRouter({
routes: [
// 对path属性完全匹配
{
path: '/login/:id',
component: {
template: 'name---{{$route.params.id}}
',
created() {
console.log(this)
}
}
},
{
path: '/login/:id/:name',
component: {
template: 'name---{{$route.params.id}}---{{$route.params.name}}
',
created() {
console.log(this)
}
}
}
]
})
var vm = new Vue({
el: '.app',
router
})
</script>
路由模块的嵌套
有时我们有这样的需求，一个路由的显示条件，还得基于另一个路由显示。即一个页面的URL是唯一的，但是一个页面有时不能只显示一个路由模块，这时需要用到路由的嵌套。使用route对象的children属性
<body>
<div class="app">
<router-link to="/parent">父模块</router-link>
<router-view></router-view>
</div>
<template id="temp">
<div>
<h1>父模块内容</h1>
<router-link to="/parent/children1">子模块1</router-link>
<router-link to="/parent/children2">子模块2</router-link>
<router-view></router-view>
</div>
</template>
</body>
<script>
var router = new VueRouter({
routes: [
{
path: '/parent',
component: {
template: '#temp'
},
children: [
{
path: 'children1',
component: {
template: '子模块1内容
'
}
},
{
path: 'children2',
component: {
template: '子模块2内容
'
}
}
]
}
]
})
var vm = new Vue({
el: '.app',
router
})
</script>
多个路由显示
一个页面的URL是唯一的，有时我们一个URL需要显示多个router模块，使用route对象的components即可实现
<body>
<div class="app">
<router-link to="/url">一个URL</router-link>
<router-view></router-view>
<router-view name="router1"></router-view>
<router-view name="router2"></router-view>
</div>
</body>
<script>
var router = new VueRouter({
routes: [
{
path: '/url',
components: {
default: {
template: '默认路由模块
'
},
router1: {
template: '路由模块1
'
},
router2: {
template: '路由模块2
'
}
}
}
]
})
var vm = new Vue({
el: '.app',
router
})
</script>