vue-router使用心得
一 抒情偏:
首先请先让抒个情,毕竟我也是个骚年,自从敲上代码后每天都是枕戈待旦,砥砺前行,如履薄冰,希望不负汗水,不负哪些被敲坏的键盘,摔坏的鼠标,夜凉如水,而此时此刻我还在奋笔疾书。
二:简单介绍
router是干什么的?
通过router来实现各个各个组件之间的组合,来实现sap页面应用。
使用步骤:
1,在vue JS模块中引入:
import Vue from 'vue';
import VueRouter from 'vue-router';
2,注册路由插件
Vue.use(VueRouter);
配置路由:
new VueRouter({ 先写个路由器
routes:[
{
path:"/路径"
component: about 组件
{
path: '/',
redirect: '/about' // 默认路由
}}]
配置嵌套路由 children
path: '/home',
component: home,
children: [
{
path: 'news',
component: news
},
{
path: 'message',
component: message
}
]
配置router链接
router--link:用来生成路由链接
router- vive : 用来显示当前路由组件界面
三:编程式导航
想要得到导航不同的url ,就要使用router.push方法。这个方法会向history栈添加一个新的记录,当用户点击浏览器 后退按钮时 会退到url。
四:导航的护卫
如果想要实现每个路由进入前进行判断,满足条件才进行跳转,否则跳转到特定的页面,这个时候我们就要用到vue-router beforeEach这个方法来实现而他与三个参数:
to:router进入的目标对象
from:router导航要离开的路由
next:function 一定要调用改方法来resolve这个钩子执行效果依赖next方法的调用
注册全局的方法:
const router =new Vuerouter({})
router .beforeeach((to ,from ,next))=>{
}
不写demol心累
总结:
今晚就总结到这吧,不喜勿喷,成长路上在于点滴积累,知识在于分享,路的方向对了,不管多曲折,多艰难都要走下气,结绳记事,不负好时光----------汪少。