vue-router
安装：
npm install vur-router
route和router的区别
router: 管理者管理所有的路由
route: 单个的页面路由
传递参数
<a href="#/auction/:name=zzp&?id=123>传递</a>
$route.params.name用来获取路径中的name/user/:name
$route.query.age用来获取问号❓后的值/user/:name?age=20
子路由: 添加children:
{
path: 'auction',
name: 'auction',
meta: { title: '退款订单', icon: 'setting', routeid: '1' },
component: () => import('@/views/components/auction/index'),
children: [
{
path: 'auctionorder',
name: 'auctionorder',
meta: { title: '退款详情', icon: 'setting', routeid: '1-1' },
hidden: true,
component: () => import('@/views/components/auction/auctionorder/index')
}
]
}
路由元信息:
$route.meta.title
路由的过渡
<transition> <router-view /> </transition>
导航守卫使用
全局导航守卫方法在main.js中使用
全局前置守卫 ==>beforeEach
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => { ... })
全局解析守卫 ==>beforeResolve
const router = new beforeResolve({ ... })
router.beforeEach((to, from, next) => { ... })
全局后置守卫 ==>afterEach
const router = new afterEach({ ... })
router.beforeEach((to, from) => { ... })
路由独享守卫
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => { ... }
}
]
组件内守卫 ==> beforeRouteEnter | beforeRouteUpdate | beforeRouteLeave
data() {
return {
infor: 'hello'
}
}
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
alert(this.infor); //弹出消息框信息为 undefined
next(vm =>{
//此时该组件被实例化了
alert(vm.infor); //弹出消息框信息为 hello
})
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
next(false) //不跳转
}
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
路由元信息
我们称每个路由对象为路由记录，路由记录可以嵌套。所以到我们匹配到一个路有的时候他有可能有多条路由记录。路由记录会暴露在对应路由对象上，我们可以通过$route.matched获取到当前路由所有的路由记录，$route.matched[n].meta可以获取其中一个路由记录的meta字段,遍历一下
项目目录结构
.
├── build/ # webpack 配置文件；
│ └── ...
├── config/ # 与项目构建相关的常用的配置选项；
│ ├── index.js # 主配置文件
│ ├── dev.env.js # 开发环境变量
│ ├── prod.env.js # 生产环境变量
│ └── test.env.js # 测试环境变量
│
├── src/
│ ├── main.js # webpack 的入口文件；
│ ├── common/ # 存放项目共用的资源，如：常用的图片、图标，共用的组件、模块、样式，常量文件等等；
│ │ ├── assets/ # 存放项目共用的代码以外的资源，如：图片、图标、视频 等；
│ │ ├── components/ # 存放项目共用的组件，如：封装的导航条、选项卡等等； 备注：这里的存放的组件应该都是展示组件；
│ │ ├── network/ # 存放项目的网络模块，如：接口；
│ │ ├── compatible/ # 存放项目的兼容模块，如：适合App和微信各种接口的模块；
│ │ ├── extension/ # 存放已有类的扩展模块，如：对 Array 类型进行扩展的模块；
│ │ ├── libraries/ # 存放自己封装的或者引用的库；
│ │ ├── tools/ # 自己封装的一些工具
│ │ ├── constant.js # 存放js的常量；
│ │ ├── constant.scss # 存放scss的常量；
│ │ └── ...
│ └── app/ # 存放项目业务代码；
│ ├── App.vue # app 的根组件；
│ └── ...
│
├── static/ # 纯静态资源，该目录下的文件不会被webpack处理，该目录会被拷贝到输出目录下；
├── test/ # 测试
│ ├── unit/ # 单元测试
│ │ ├── specs/ # test spec files
│ │ ├── eslintrc # 专为单元测试配置的eslint配置文件
│ │ ├── index.js # 测试编译的入口文件
│ │ ├── jest.conf.js # Jest的配置文件
│ │ └── karma.conf.js # Karma的配置文件
│ │ └── setup.js # 在Jest之前运行的启动文件；
│ └── e2e/ # e2e 测试
│ ├── specs/ # test spec files
│ ├── custom-assertions/ # 自定义的断言
│ ├── runner.js # test runner 脚本
│ └── nightwatch.conf.js # test runner 的配置文件
├── .babelrc # babel 的配置文件
├── .editorconfig # 编辑器的配置文件；可配置如缩进、空格、制表类似的参数；
├── .eslintrc.js # eslint 的配置文件
├── .eslintignore # eslint 的忽略规则
├── .gitignore # git的忽略配置文件
├── .postcssrc.js # postcss 的配置文件
├── index.html # HTML模板
├── package.json # npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
└── README.md
网友评论