路由2
-
路由守卫
守卫函数中的参数： • `to`: 即将要进入的目标。 • `from`: 当前导航正要离开的路由。 • `next`：next 是一个函数，next() 执行下一个钩子；next( false ) 表示中断执行； • next( '/login' ) 里面的参数可以是路由传参的参数设置一样。 • next( '/login' ) next( { path :' /name ' } ) next( { path :' /name ', query : { id : 123 } } ) -
全局守卫
路由鉴权
白名单鉴权
这种方式是通过路由白名单来实现的；路由白名单就是一个数组，将不需要鉴权的path放进去，在beforeEach触发的时候，判断一下是不是在数组中，在数组中直接放行即可；不在数组中的，就是需要鉴权的// 在src 目录下 新建一个 permission.js // 引入 路由表文件 router/index.js import router from '.../router' router.beforeEach((to,from,next)=>{ const routerArr=['/login','/regist','/home'] if(routerArr.indexOf(to.fullPath) !== -1){ // 直接放行 next() return } let token = localStorage.getItem("TOKEN") if(token){ // 直接放行 next() }else{ // 否则跳转至 登录界面 next('/login') // next 中支持 字符串参数，对象参数，参数+传值 } }) // 使用 在 main.js 文件中引入 import './permission.js' new Vue({ router, render:h=>h(App) }).$mount("#app")// 在src 目录下 新建一个 permission.js // 引入 路由表文件 router/index.js import router from '.../router' router.beforeEach((to,from,next)=>{ const routerArr=['/login','/regist','/home'] // Array.includes() 可以用来判断数组中是否包含指定的值 if(routerArr.includes(to.fullPath)){ // 直接放行 next() return } let token = localStorage.getItem("TOKEN") if(token){ // 直接放行 next() }else{ // 否则跳转至 登录界面 next('/login') // next 中支持 字符串参数，对象参数，参数+传值 } }) // 使用 在 main.js 文件中引入 import './permission.js' new Vue({ router, render:h=>h(App) }).$mount("#app")元信息鉴权
const routes=[ { path:'/main', component:Main, meta:{ isAuthentication:true, } } ]// 在src 目录下 新建一个 permission.js // 引入 路由表文件 router/index.js import router from '.../router' router.beforeEach((to,from,next)=>{ // matched 是一个数组 if(to.matched.some(item=>item.meta.isAuthentication)){ // 直接放行 next() return } let token = localStorage.getItem("TOKEN") if(token){ // 直接放行 next() }else{ // 否则跳转至 登录界面 next('/login') // next 中支持 字符串参数，对象参数，参数+传值 } }) // 使用 在 main.js 文件中引入 import './permission.js' new Vue({ router, render:h=>h(App) }).$mount("#app") -
全局解析守卫
router.beforeResolve((to,from,next)=>{ // }) -
全局后置守卫
router.afterEach((to,from)=>{ // }) -
独享守卫
const routes=[ { path:'/home/:id', component:Home, props:true // 注意这样一行代码 beforeEnter:(to,from,next)=>{ // 和全局守卫的使用一样 } } ] -
组件内守卫
beforeRouteEnter next回调
路由的 hash 模式和 history 模式
const router=new VueRouter({
mode:'hash' // 这个表示路由的 hash 模式
// mode:'history' // 这个表示路由的 history 模式
routes
})
hash 与 history 的区别
地址栏表现不一样：#
底层原理不一样：
hash模式使用的是 location.hash 实现的：
- hash 将井号 `#` 拼接在真实 URL 后面的模式。当井号 `#` 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 `hashchange` 事件
history 使用的是 html5 的history对象实现的：
- 用户点击浏览器的前进和后退操作，操作保存在history中的。
- history 的 `pushState()` 和 `replaceState()`方法
hash的优缺点：不美观但兼容性好
history的优缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了 但比hash美观
@/ ==> src/ 可以在webpack改配置
route
router与route的参数对比
$router
是什么？
$router是VueRouter的实例，我们可以在任何地方使用它。
常用方法：
作为全局路由对象，它包含了许多属性。譬如：history对象。
this.$router.push('/user') // 跳转路由
this.$router.replace('/user') // 跳转路由，但是不会有记录，不入栈。
$route
是什么？
$route表示当前正在跳转的路由对象。包含路由相关信息，如path,name,meta 等
常用：
- 使用params传递参数
// 使用带params的路由跳转
this.$router.push({name:'user',params:{id:1}})
// 对应取参
this.$route.params.id
注：使用params进行传参时，只能使用name，不然取参取不到，圈起来，要考的~
- 在path中进行配置（与params类似）
this.$router.push(`/user/${userId}`)
// 这时路由需要进行特殊配置
{
path: '/user/:userId',
name: 'user',
component: components['user']
}
// 对应取参
this.$route.params.id
- 使用query
// 使用query
this.$router.push({path: '/user',query:{userId:2}})
// 对应取参
this.$route.query // get请求url后面带的查询参数
params与query使用区别
- url上 params方式，在url中不会将传递的参数进行显示，类似于post，相对安全。 query方式，在url中会将传递的参数进行展示，类似于get，不安全。
- 用法 params需要用name引入，query需要path引入。
\
