Vue笔记9：路由二

路由传参

查询字符串方式

1、 配置

 :to= "{name:'detail',query:{id:hero.id}}"

2、规则

{name:'detail',path:'/detail',component:Detail}

3、获取

this.$route.query.id

4、生成

path方式

1、 配置

 :to= "{name:'detail',params:{id:hero.id}}"

2、规则

{name:'detail',path:'/detail/:id',component:Detail}

3、获取

this.$route.params.id

4、生成

vue-router中的对象

• $route 路由信息对象，只读对象

• $router 路由操作对象，只写对象

• 代码示例

---

复习
slot -> 填入一个组件
具名slot -> 多个组件按位置填入不同的坑

嵌套路由（多个组件，按不同的锚点值，来填人不同的坑）

• 所谓的用单页应用框架开发多页应用
  • 可以用嵌套路由来实现

使用须知
1.包含
2.路由children路由

• 案例
  • 进入我的主页显示：电影、歌曲

代码：

路由meta元数据

• meta是对路由规则是否需要验证权限的配置
• 路由对象中 和 name属性同级{ meta:{ isChecked:true } }

路由钩子

• 权限控制的函数执行时期
  • 每次路由匹配后，渲染组件到router-view之前
  • router.beforeEach(function (to,from,next){ })
    代码：

编程导航

• 1:跳到指定的锚点，并显示页面this.$router.push({ name:'xxx',query:{ id:1 },params:{name:'abc' } })
• 2:配置规则 { name:'xxx',path:'/xxx/:name' }
• 3 : 根据历史记录，前进或后退
  • this.$router.go(-1 | 1)
  • 1代表进一步，-1是退一步