关于Vue路由

路由

vue-router是vue的核心插件

• 下载
  • npm -i vue-router -S
  • 在main.js 中引入vue-router对象
    • import VueRouter from './xxx.js'
  • 安装插件，否则不认识（重要）
    • Vue.use(VueRouter);
  • 创建路由对象
    • var router = new VueRouter();
  • 配置路由规则
    • router.addRoutes([路由对象])
      • 路由对象{path: '锚点值', component: 要显示的组件};
  • 将配置好的路由对象交给Vue
    • 在options中传递 -> key 叫做 router
  • 留坑
    • <router-view></router-view>

Router参数

• created 数据已经完成初始化，更适合操作data中的属性
• 此时获取路由参数，将参数与data中的属性进行结合
• 页面可以显示正常数据

created() {

// 获取路由参数中的查询字符串

// <router-link :to="{name: 'detail', query: {id: 1}}"></router-link>

 

}

Vue.prototype.xxx = {add: fn}; 所有组件中，使用this.xxx就能拿到这个对象

查询字符串（以下例子在vue第三天09中

• 配置
  • :to="{name: 'detail', query: {id: hero.id}
• 规则
  • { name: 'detail', path: '/detail', component: Detail}
• 获取
  •  this.$route.query.id
• 生成
  • <a href="/detail?id=1"></a>

path 方式

• 生成
  • <a href="/detail/1"></a>
• 配置
  • :to="{name: 'detail', params: {id: hero.id}
• 规则
  • { name: 'detail', path: '/detail/:id'}
• 获取
  •  this.$route.params.id

总结

path方式需要在路由规则中声明位置

vue-router 中的对象

• $route 路由信息对象，只读对象
• $router 路由操作对象，只写对象

多视图（命名视图）

嵌套路由

市面上所谓的用单页应用框架开发多页应用就是嵌套路由

一般做的页面是Tab栏切换（猜想

代码思想：

• router-view的细分
  • router-view第一层中，包含一个router-view
• 每一个坑挖好了，要对应单独的组件

嵌套路由好处：

• 避免代码荣誉
• 避免重复渲染
• 利于组件的复用

如果遇上稍微公共一点的部分，就提取出来，这样在代码的编写中，会累计出很多很多的组件

 

路由钩子

钩子函数：主要用来拦截导航，让它完成跳转或取消，在导航的不同阶段来执行不同的函数，最后钩子函数执行结果会告诉导航怎么做

先说这个beforeEach的钩子函数，它是一个全局的before 钩子函数， （before each）意思是在每次每一个路由改变的时候都得执行一遍。

 它的三个参数：

• to: (Route路由对象)  即将要进入的目标 路由对象       to对象下面的属性： path   params  query   hash   fullPath    matched   name    meta（在matched下，但是本例可以直接用）
• from: (Route路由对象)  当前导航正要离开的路由
• next: (Function函数)   一定要调用该方法来 resolve 这个钩子。  调用方法：next(参数或者空)   ***必须调用

 

next(无参数的时候):  进行管道中的下一个钩子，如果走到最后一个钩子函数，那么  导航的状态就是 confirmed （确认的）

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

 

 

全局钩子函数之   全局的afterEach钩子：

after 钩子没有 next 方法，不能改变导航，代表已经确定好了导航怎么去执行后，附带的一个执行钩子函数

 

组件内的钩子函数：（ beforeRouteEnter 和 beforeRouteLeave 再加一个 watch函数 ）

vue2.X的组件内钩子函数比vue1.X减少了许多。。

 

• 使用组件自身的生命周期钩子函数来替代 activate 和 deactivate
• 在 $router 上使用 watcher 来响应路由改变 
• canActivate 可以被 router 的配置中的 beforeEnter 中实现
• canDeactivate 已经被 beforeRouteLeave 取代, 后者在一个组件的根级定义中指定。这个钩子函数在调用时是将组件的实例作为其上下文的。
• canReuse 已经被移除，因其容易混淆且很少被用到。
• 用ajax获取数据的data(to, from, next) 钩子用组件内 beforeRouteEnter (to, from, next)来替代

路由元数据

meta

后端权限控制

全局守卫

router.beforeEach((to, from, next)=>{})

编程式导航

$route 可写对象具备行为

根据浏览器历史纪录前进或者后退 `this.$route.go(-1 || 1)`

更改锚点值跳转 `this.$route.push(routeObj)`

重定向

写在规则的第一行：redirect('/xxx')

写在规则的最后： 404

• { path: '/', redirect: {name: 'xxx'} }

权限控制

Vue.prototype.$ = $ 让Vue中所有this都可以使用

路由信息对象

#/home?id=1#a=1

以上字符串的封装

hash: a = 1;

query: { id: 1};

fullpath: /home?id = 1;

meta: 代表提前给路由配置的数据（元数据)

matched: 父路由中meta设置了需要验证，就是需要验证，子路由就共享

$router(只写对象【锚点值)

$route(只读对象 【锚点值)j