vue路由学习笔记

1.路由的安装：

<script src="vue-router.js"></script>

2.路由的使用：

//2.1使用构建函数
var router=new VueRouter({
　　　　routes:routes
})
//2.2创建路由规则
var routes=[{
path:'/login',
component:{
　　template:'<h1>demo</h1>'
}
}]
//2.3挂载到实例上：
var vm=new Vue({
　　el:'#app',
　　router:router
})

3.路由的传值：

//3.1利用地址栏传值：会将url的所有信息注入到路由中，赋值为this.$route.query,取值方法：$route.query.key

var routes=[{
path:'/login?id=10&name="demo"',
component:{
　　template:'<h1>demo</h1>'
}
}]

//3.2利用params传值：
　　//发送的格式：
　　<router-link to="/account/10"></router-link>

　　//接受的格式

var routes=[{
path:'/login/:id',
component:{
　　template:'<h1>demo</h1>'
}
}]
//使用的格式：

this.$router.params.id

4.路由的嵌套：

4.1创建一个路由的子路由：就是在父路由的基础上加一个children属性,这是一个数组，在父路由的component加上router-link的插槽
var routes=[{
path:'/login',
component:'<div><h1>父路由的内容</h1><router-link to="more"></

router-link

><router-view></router-view></div>',
　　　　children:[{
　　　　　　　　　　path:'more',
　　　　　　　　　　component:{
　　　　　　　　　　　　　　　　template:'<h1>子路由的内容</h1>'
　　　　　　　　　　　　　　　　}
　　　　　　　　　　}]
}]

 

 5.命名视图实现经典布局

//将一个路由对应的多个模板字符串放入对应的router-view标签里面
var router=new VueRouter[{
　　　　routes:[{path:'/login',components:{header:'<h1>头部信息</h1>'，
　　　　　　　　　　　　　　　　　　　　　　　　　　body:'<h1>主体信息</h1>'}}]

}]
//容器的设置方法：
<router-view name="header"></router-view>

<router-view name="body"></router-view>

6.导航钩子：

demo

7.元数据及路由匹配