5分钟了解vue-router的基本使用
目的: 了解 vue-router 的使用javascript
阅读时长: 5 分钟html
来源: 并不是原创，整理自视频前端
主要内容vue
- vue-route的基本使用
- router的钩子以及执行顺序如何
- router的参数传递方式
正文
router.gif java
1.基本使用
1-1. 创建一个Route的文件夹，新建index.jsvue-router
import Vue from 'vue';
import VueRouter from 'vue-router';
import Routes from './routes.js'
Vue.use(VueRouter);
export default new VueRouter {
mode: 'hash',
routes
}
复制代码
以上代码注意两点:bash
-
第一点: vue 的 第三方组件，都须要经过Vue.use( . . . )的方式去 install 组件。app
- router组件install的时候，会注册两个全局组件
- router-link : 跳转
- router-view : 在什么地方显示内容
- 每一个组件上会有两个属性(我曾经一度不知道 router 和 route 的区别, 记住下面的两点，将不用再去犯错了。)
-
$router : 包含全部的方法学习
- $router.push({path:'home'})
- $router.replace({path:'home'})//替换路由，没有历史记录
-
$route : 包含全部的属性this
-
-
- router组件install的时候，会注册两个全局组件
-
第二点:
export default new VueRouter ({ })里面有各类属性和路由的映射表- mode: hash: 默认值，/#/
- mode: history: /
- routes 路由映射，什么路由显示什么vue组件
- ...
1-2: 创建routes.js
import Home from '../view/Home.vue';
...
export default [
{
path: '/', // 重定向到home页面
redirect: '/home'
},
{
path: '/home',
component: Home
}
...
]
复制代码
1-3: main.js 中注册 router
...
import router from './router'
...
new Vue({
router,
render: h => h(App),
}).$mount('#app')
复制代码
OK: 到这里，基本路由就已经实现了
我们去app.js使用router-link 和 router-view 吧
<template>
<div id="app">
<ul class="nav">
<li class="nav-item">
<router-link class="nav-link" to="/home">Home</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
复制代码
路由懒加载是这个样子的。
{
path: '/home',
component: () => import('../view/Home.vue')
}
复制代码
嵌套路由是这个样子的。
{
path: '/user',
component: User,
// child 下面放须要嵌套的路径和视图
children: [
...
{
path: '/add',
name: 'userAdd',
component: () => import('../view/UserAdd.vue')
}
...
]
},
复制代码
2. router的钩子以及执行顺序如何
- 全局beforeEach: 通常用来作权限控制。
- 路由中beforeEnter: 用的很少
- 组件里调用 beforeRouteEnter: 这个方法里面没有this
- 全局 router.resolve
- 全局 afterEach
- 调用组件的 beforeRouterLeave: 离开是提醒，是否提交表单，是否关注等等
- beforeRouterUpdate
beforeRouterUpdate 用在路由参数更新了，可是路由没有更新时使用。
router.beforeEach((to, from, next) => {
// 每一个路由钩子都会有三个参数，是to、from、next
// 具体如何使用，我会单独写一个使用jwt权限控制的文章，在那里面结合实际使用来讲明三个参数的使用和路由钩子的使用状况
})
复制代码
这里，我只聊了下执行顺序，具体的能够参照官方手册，或者关注我下次的权限控制篇。
3. 参数如何传递
参数的传递方式有两种
路由:/detail/1 Vs 路径：/detail?id=1
- 路由里面传参数
vue代码以下:
<router-link to="/user/detail/1">用户1</router-link>
-----
routes代码以下:
{
// 路径里面传递参数是经过斜线传递的：好比/user/detail/1
path: 'detail/:id',
name: 'userDetail',
component: () => import('../view/UserDetail.vue')
}
----
这种参数在组件里面如何获取呢？
this.$route.params.id
复制代码
- 路径里面问号形式传参数
<router-link to="/user/detail?id=1">用户1</router-link>
这种传递方式如何在组件里面获取参数呢？
this.$route.query.id
复制代码
总结: 本文简单的聊了一下，如何去初始化一个路由，嵌套路由，路由钩子的执行顺序以及参 数的传递方式。
还有路由守卫在权限控制中使用状况并未介绍，我将在下一篇去写一个完整的小demo，讲述路由钩子在权限控制中的使用，jwt的使用，已及权限控制实现的基本实现。
ps: 我是一个前端初学者，博客彻底是记录本身学习的一种方式，所写文字确定有不清晰和不完善以及错误的地方。若是不妥之处，但愿大神的批评指正，将不胜感激。
谢谢观看！
我是海明月，前端小学生。